盒模型

盒模型

box：盒子，每个格元素在页面中都会生成一个矩形区域（盒子）
行盒在页面中不换行，块盒独占一行

盒子的组成部分

1. 内容 content
2. 填充 padding
3. 边框 border
4. 外边距 margin

补充

1. box-size: 盒子尺寸，宽高范围
2. background-clip：背景覆盖范围
3. word-break：断词规则，影响文字在什么位置被截断换行
4. white-space：空白处理

行盒的盒模型

1. 盒子沿着内容延申
2. 行盒不能设置宽高
3. padding,border,margin：水平方向有效，垂直方向仅会影响背景，不会占据空间

调整行盒的宽高可以通过设置字体，行高等间接设置

行块盒

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

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

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

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素;
少部分元素，页面上显示的结果，取决于元素属性，成为可替换元素;
可替换元素： img，video， audio;
绝大部分可替代元素是行盒;
可替换元素类似于行块盒，盒模型中的尺寸都有效。

object-fit: contain 保持比例，不丢失信息