CSS盒模型

行盒

常见行盒：span a img video
行盒相对于块盒：

• padding、border、margin属性上下内边距仅仅会影响背景不再占据空间
• 盒子沿着内容延伸（auto），一般设置宽高不起作用
• 设置行盒的宽高应用字体大小、行高等间接调整

行块盒

display:inline-block
不独占一行的块盒

行盒&行块盒的空白折叠

源代码中间有空白符，盒之间也会有一个空白，即使你并未设置外边距
PS:用块盒＋浮动可以代替

可替换元素与不可替换元素

大多数元素是不可替换元素，即其内容直接表现给用户端
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容，如image
可替换元素类似于行块盒，可以设置其宽高
object-fit属性设置图片显示方式，与background-size类似