CSS 盒模型

盒模型

无论行盒还是块盒都由下面几个部分组成，从内到外是 ：

内容 content

width, height 设置的是盒子内容的宽高

内容部分通常叫做整个盒子的 内容盒 content-box

填充(内边距) padding

盒子边框到盒子内容的距离

填充区 + 内容区 = 填充盒 padding-box

边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框 + 填充区 + 内容区 = 边框盒 border-box

外边距 margin

边框到其他盒子的距离

行盒模型

盒子沿着内容沿伸
不能设置宽高，宽高跟着内容走 调整行盒的宽高，应该使用字体大小，行高，字体类型，间接调整
内边距 padding (填充区)，边框 border，外边距 margin ： 水平方向有效，垂直方向仅会影响背景，不会实际占据空间

空白折叠

空白折叠，发生在行盒(行块盒)内部 或 行盒之间

可替换元素 和 不可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为 非可替换元素

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

可替换元素 ： img , video, audio
绝大部分可替换元素均为 行盒

可替换元素类似于行块盒，可以设置宽高

object-fit 属性可以设置图片适应情况