盒模型
box：盒子，每个格元素在页面中都会生成一个矩形区域（盒子）
行盒在页面中不换行，块盒独占一行
盒子的组成部分
- 内容 content
- 填充 padding
- 边框 border
- 外边距 margin
扩展
- box-size: 盒子尺寸，宽高范围
- background-clip：背景覆盖范围
- word-break：断词规则，影响文字在什么位置被截断换行
- white-space：空白处理
行盒的盒模型
- 盒子沿着内容延申
- 行盒不能设置宽高
- padding,border,margin：水平方向有效，垂直方向仅会影响背景，不会占据空间
调整行盒的宽高可以通过设置字体，行高等间接设置
行块盒
- 不独占一行
- 盒模型中所有尺寸有效
空白折叠
发生在行盒（行块盒）内部或者行盒（行块盒）之间
可替换元素和非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，成为可替换元素
可替换元素： img，video， audio
绝大部分可替代元素是行盒
可替换元素类似于行块盒，盒模型中的尺寸都有效
object-fit: contain 保持比例，不丢失信息
标签：盒子,模型,元素,行块,行盒,替换 From： https://www.cnblogs.com/zhanxinbing/p/18162016