行盒的盒模型
常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio
显著特点
-
盒子沿着内容沿伸
-
行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整
-
内边距（填充区）
水平方向有效，垂直方向仅会影响背景（背景变，但字体还是不动），不会实际占据空间。
-
边框
水平方向有效，垂直方向仅会影响边框粗细（边框变，但字体还是不动），不会实际占据空间。
-
外边距
水平方向有效，垂直方向还是不动，不会实际占据空间。（test2）
行块盒
可以设置盒模型中的每一个尺寸
display：inline-block 的盒子（既有行盒的特点又有块盒的特点）(test3)
-
不独占一行
-
盒模型中所有尺寸都有效
空白折叠
空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素（div、p、span、a）
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素（img、video、audio）
绝大部分可替换元素均为行盒（img就是行盒的格式，但是宽高还有边框都有效，宽度和高度如果只设置一个的话会按比例增加）。
在img中，通过下面属性来调整图片比例 ：
-
object-fit：contain
-
object-fit：fill（默认取值，整个图片填充满，比例会变化）
-
object-fit：cover（保证把区域填充满没有空隙，但又不能没有比例，所以只能图片的一些信息）
可替换元素类似于行块盒，盒模型中所有尺寸都有效
标签：img,CSS10,模型,元素,边框,行块,行盒,替换 From： https://www.cnblogs.com/zjy1020/p/17253085.html