行盒的盒模型
常见的行盒：包含具体内容的元素 span strong em i img viedeo audio 伪类元素
显著特点
- 盒子沿着内容延伸，因为可以理解行盒就是内容，行盒跟着内容，内容在哪结束，行盒就在那结束。
- 行盒设置宽高不生效，因为行盒是跟着内容走的，所以宽高应该使用字体大小，行高，字体类型间接调整 所以不能你是不能设置宽高的。
- 内边距（填充区） 水平方向有效的，垂直方向仅会影响背景，不会占据空间。 通俗的讲，就是你设置水平的padding，后面的元素会往后面挤，但是你设置竖直方向的padding，只是背景颜色上个色，并不会挤他上下的元素的位置，也就是说水平是占据空间的，垂直方向不占据空间。
下面就是设置 paddingTop 的结果。水平方向正常。
4.边框 边框和内边距一样，水平方向有效，垂直方向不会占据空间，因为他觉得他的高度应该取决于内容的高度。
5.外边距 水平方向有效，垂直方向不会占据空间。
行块盒
diaplay: inline -block 的盒子
- 不独占一行
- 盒模型中的所有尺寸都有效
空白折叠
空白折叠，发生在行盒（行块盒）内部或者行和（行块盒）之间，要想消除之间的空格，我们需要把这个盒子之间空格消除掉，怎么消除掉呢，很简单就是把之间空格全删除，写到一行去。
可替换元素和非可替换元素
大部分元素，页面上显示的结果，取决于元素的内容，称为可替换元素
少部分元素，页面显示的结果，取决于元素属性，称为 可替换元素
可替换元素：img，video，audio 绝大部分可替换元素均为行盒
可替换元素类似于行快盒，盒模型中所有尺寸都有效。
img 的填充模式
object-fit 类似于UIImageView 的contentModel.
