CSS（六）——视觉格式化模型（常规流）

CSS（六）——视觉格式化模型（常规流）

前言

建议各位同学在本篇笔记中先看总结，然后再看正文，可能节省时间。

严格来说，CSS作为给页面元素添加样式的语言，严格来说只有三个方面是一定要吃透的：

1. 属性值的计算过程（其中包括层叠、继承）；
2. 盒模型（行盒、块盒以及行块盒）；
3. 视觉格式化模型（布局规则）。

视觉格式化模型（布局规则）

页面中多个盒子排列规则。

视觉格式化模型（布局规则）的分类

1. 常规流；
2. 浮动；
3. 定位。

常规流（或称文档流、普通文档流、常规文档流）

【注】：所有元素在默认情况下都属于常规流布局。

规则

总体规则：块盒独占一行，行盒水平依次排列。

包含块（containing block）：

​ 每个盒子都有他的包含块，包含块决定了盒子的排列区域。绝大部分情况下是其父元素的内容块。

1. 每个块盒的总宽度必须刚好等于包含块的宽度。：宽度的默认值为：auto。将剩余空间吸收掉。

2. margin也可以设置为：auto。但width的吸收能力要比margin强。

3. 若宽度、边框、内边距计算后，仍然有剩余空间，该剩余空间被margin-right吸收掉。

   【注】：也可以使用margin-left来吸收，但需要改变浏览器布局规则。

4. 如果margin-left和margin-right都设置为auto，则两边平分。

以上说明的是平行方向上的样式==

在垂直方向上的auto

1. height:auto。适应内容的高度
2. margin:auto。表示0.

百分比取值

padding、宽、margin可以按照百分比取值——所有百分比相对于包含块的宽度

高度的百分比：

1. 包含块的高度取决于子元素的高度，设置百分比无效。

2. 包含块的高度不取决于子元素的高度，设置百分比有效。

   综上所述，在垂直方向上的百分比取值是否有效，应取决于父元素是否能自行决定。如果父元素的高度取决于子元素的高度，而子元素的高度值为百分比则没有明确指定，即必须设定父元素的值为一个确定的数值。

上下外边距的合并：

1. 两个常规流块盒，上下外边距相邻会进行合并。

   两个外边距取最大值

2. 父子元素之间的外边距的合并。同样取最大值

如果不想让父子元素之间的margin合并，则可以使父子元素之间的margin不相邻，即修改父元素的border或padding。

总结

本篇笔记在记录过程中可能比较杂乱，因为在这部分知识点本身较为复杂，那么总结一下：

1. 在默认条件下，所有元素的布局均遵循常规流布局。而常规流布局中的总体规则是：行盒水平排列；块盒独占一行（承接了之前在HTML&CSS课程概述一文中超链接下的补充说明，即HTML5中摒弃了行元素和块元素的说法）。

2. 包含块的概念：所谓包含块就是包含各个盒子的一个区域。每个盒子都有属于自己的包含块，且自己的包含块在绝大多数情况下都是自己父元素的内容盒（content）

3. 先说宽度：每个块盒的宽度（content、padding、border、margin）应该是自己包含块的宽度，且块盒宽度默认为auto，如果自己设定的所有属性的宽度和并没有等于包含块的宽度，则会自动填充吸收为margin-right。

   如果设置为auto，则要注意width的auto吸收能力强于margin，即二者同时设定为auto，则width会吸收剩余空间。

   垂直方向上有两方面需要注意：

   a）height的auto表示适应内容的高度

   b）margin的auto表示为0。

4. 百分比取值：

   a）padding、宽度、margin的百分比取值是基于相当于包含块的宽度。

   b）高度的百分比取决于父元素的高度是否为确定数值：如果为确定数值，则子元素的高度是基于父元素内容盒高度的百分比；如果没有确定高度，则无效。

5. margin合并：

   块元素之间的margin如果相邻则会合并，且会是最大的那个margin。

   父子元素之间的margin如果相邻则会合并，且会使最大的那个margin。

   块元素和并尚且美观，父子元素的合并如果想避免可以更改父元素的border或padding。