盒模型的应用
改变宽高范围
默认情况下，width 和 height 设置的是内容盒的宽高。
通过 box-sizing 属性来改变盒子的高度和宽度。
改变背景覆盖范围
默认情况下，背景覆盖的范围是，内容区，边框，内边距。
通过 background-clip 属性设置背景的覆盖范围。
溢出处理
overflow，控制内容溢出边框盒的处理方式。 可以设置 overflow-y/x 来设置滚动条。
断词规则
word-break 会影响文字在什么位置被截断。
normal：普通。CJK字符（文字位置阶段），非CJK字符（单词位置截断）。
break-all：截断所有。所有字符都在文字处截断。
keep-all：保持所有。所有文字都在单词之间截断。
空白处理
white-space：nowarp 不换行。
overflow：hidden
text-overflow：ellipsis 文字溢出的部分使用原点代替。
控制单行文本溢出显示省略号：
white-space:nowarp;
overflow:hidden;
text-overflow:ellipsis;
行盒盒模型
常见的行盒：包含具体内容的元素。span，i，strong，em，video，audio
显著特点
- 盒子沿着内容延伸。
- 行盒不能设置宽高。
要调整行盒的宽高，应该通过调整字体大小，行高，字体类型，间接调整。
- 内边距：水平方向有效，垂直方向仅会影响背景，不会实际占据空间。
- 边框：水平方向有效，垂直方向仅会影响背景，不会实际占据空间。
- 外边距：水平方向有效，垂直方向仅会影响背景，不会实际占据空间。
行块盒
display:inline-block; (带有这个属性值的盒子)
- 不独占一行。
- 盒模型中所有尺寸都有效。
行盒（或者行块盒）之间会有间隙，是因为空白折叠，空白折叠发生在行盒里面 或 者行盒之间。要想消除，行盒之间不要换行
可替换元素和非可替换元素
-
大部分元素，网页上所显示的结果，取决于元素的内容，这种元素称为非可替换元素。
-
少部分元素，网页上所显示的结果，取决于元素的属性，这种元素称为可替换元素。 img， video， audio，绝大部分可替换元素默认为行盒。
-
可替代元素类似于行块盒，盒模型中所有元素尺寸都生效。 object-fit 属性，设置图片或者视频的适应方式。取值：
- contain:不要打破图片的比例，图片也要完全显示。
- fill：填充。
- cover：填充，并保持图片的比例。
常规流
盒模型：规定单个盒子的规则。
视觉格式化模型（布局规则）：页面中多个盒子的排列规则。将盒子的排列分为三种方式。
- 常规流
- 浮动
- 定位
常规流布局
所有元素，默认情况下，都是常规流布局。
总体规则：块盒独占一行，行盒水平依次排列。
包含块（containg block）：每个盒子都有他的包含块，包含块，决定了盒子的排列区域。
绝大多数情况下，盒子的包含块，为其父盒子的内容盒。
布局规则
块盒：
-
每个块盒的总宽度，必须刚好等于包含块的宽度。
宽度的默认值是 auto：默认将剩余空间吸收掉。margin的取值也可以是auto默认值为0。width的吸收能力高于margin（意思就是当width和margin同时设置auto的时候，优先width）。
若盒子宽度，边框，内边距，外边距计算过后，仍然有剩余空间，则全部由margin-right 吸收。
-
每个块盒垂直方向上的auto值。
height：auto; 表示适应内容的高度。
-
百分比取值
padding，宽，margin，可以取值为百分比。
以上的所有百分比相对于包含块的宽度。
高度的百分比：当包含块的高度不取决于子元素的时候，子元素高度的百分比相对于包含块的高度。
-
上下外边距的合并
两个常规流快盒，上下外边距相邻，会进行合并。（两个外边距取最大值）父子元素的magin也会进行合并。
