行盒的盒模型

常见的行盒：包含具体内容的元素

span、strong、em、i、img、video、audio

这些行盒模型也都有 content、padding、border、margin的
但它们与块盒还是有明显区别

行盒显著特点

1. 盒子沿着内容沿伸，内容在哪里结束，盒子的样式也在哪里结束

2. 行盒不能设置宽高。

• 解决办法：
  调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

3. 内边距（填充区）

水平方向有效，垂直方向不会实际占据空间。

4. 边框

水平方向有效，垂直方向不会实际占据空间。

5. 外边距

水平方向有效，垂直方向不会实际占据空间。

导致这样的原因，是行内元素认为垂直方向应该是由行高来设置。

行块盒

display：inline-block 的盒子

1. 不独占一行
2. 盒模型中所有尺寸都有效

• 在这里就可以进行行高的设置，但还是属于行元素，行元素都可以在同一行排列、

      a{
            background-color: red;
            color: aliceblue;
            line-height: 10px;
            display: inline-block;
            height: 100px;
            width: 150px;
            padding: 10px;
         }

效果图：

一般常用来做分页

 <sytle>
         .page a{
             border: 1px solid rgb(241, 228, 228);
             text-decoration: none;
             color: #3951b3;
             width: 34px;
             height: 34px;
             display: inline-block;
             line-height: 34px;
             text-align: center;
         }
          
          当鼠标移到分页上时，颜色就会发生变化
          
         .page a:hover{
             border-color: 1px solid #38f;
             background: #f2f8ff;             
            }
            
         .page a.select{
             color: blue;
             border: none;
         }
</style>

   <div class="page">
         <a href="">1</a>
         <a href="" class="select">2</a>
         <a href="">3</a>
         <a href="">4</a>
         <a href="">5</a>
         <a href="">6</a>
         <a href="">7</a>
         <a href="">8</a>
         <a href="">9</a>
         <a href="">10</a>
     </div>
     

效果图：

空白折叠

空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间。

如图所示：指两个盒子之间空白的地方。

可替换元素 和 非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
例如：div、p、span、a 等等

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

可替换元素：img、video、audio

绝大部分可替换元素均为行盒。

可替换元素类似于行块盒，盒模型中所有尺寸都有效。

例如：img是属于行盒的，本来是不能设置宽和高的，但由于是可替换元素，就变成了行块盒，可以使用块盒的各种属性，变成了可以设置宽、高、border等等。

图片的宽高 可以只设置宽 或者只设置高
如果只设置 宽，高就会随着宽的增加进行自适应。

object-fit：这个属性是可以让图片保持不变形

object-fit：contain 让图片保持原来的比例大小
object-fit: cover 让图片占满盒子，但如果宽高设置不对，图片就只能显示一点。

     img{
            height: 120px;
            width: 150px;
            border: 10px dashed red;
            object-fit: contain;
         }