26. 常规流 {ignore}

26. 常规流 {ignore}

[toc]

1. 盒模型和视觉格式化模型

盒模型：规定单个盒子的规则。

视觉格式化模型（布局规则）：规定页面中的多个盒子排列规则。

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

2. 常规流布局（Normal Flow）

常规流、文档流、普通文档流、常规文档流，指的都是同一个东西。

所有元素，默认情况下，都属于常规流布局。

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

包含块（containing block）

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

块盒在 Normal Flow 中的排列规则

1. 水平方向上，每个块盒的总宽度，必须刚好等于包含块的宽度。

总宽度：content-width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

属性值：auto

auto 表示吸收掉剩余空间。

width 宽度的默认值是 auto。
margin 外边距的默认值是 0，它的取值也可以是 auto。
width 吸收能力强于 margin，即：当两个都是auto时，width 优先。
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被 margin-right 全部吸收。

块盒在 Normal Flow 中居中显示：

在常规流中，若想实现块盒在其包含块中居中显示，可以定宽（假设还有剩余空间）、然后左右外边距 margin-left、margin-right 设置为auto。

负margin

margin-left、margin-right，如果设置为负数，那么，会导致剩余空间变多。

2. 垂直方向上，块盒的属性值为auto的情况。

height: auto; 适应内容的高度；
margin-top: auto;、margin-bottom: auto; 等价于属性值取0；

3. 百分比取值。

这一点不仅仅适用于常规流，后续介绍的浮动和定位也都适用。

width、padding、margin 可以取值为百分比。

以上的所有百分比（包括横向和纵向）相对于包含块的宽度（即：父元素内容盒的宽度）。

高度的百分比取值要分情况讨论：

包含块的高度取决于子元素的高度，设置百分比无效；
- 因为此时父元素的高度未确定，父元素的高度需要由子元素决定，而子元素的高度又是父元素高度的百分比 —— 矛盾。
包含块的高度不取决于子元素的高度（即：父元素的高度已定），百分比相对于父元素高度；
- 父元素的高度已确定，则子元素的百分比就可以直接根据父元素的高度来确定。

即：如果父元素的高度要由子元素来撑开，那么子元素的高度设置为百分比是无效的；否则，子元素的高度百分比是相对于父元素的高度而定的。

4. 上下外边距的合并。

两个常规流块盒，上下外边距相邻，会进行合并，外边距取最大值。

相邻：就是中间不能有任何其他内容；（比如中间夹一个border，这样就不会导致合并）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>margin合并</title>
    <style>
        body {
            margin: 0;
        }
        div.parent {
            width: 100px;
            height: 100px;
            background-color: #999;
            margin-top: 50px;
        }
        div.child {
            width: 50px;
            height: 50px;
            background-color: #666;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

因为 div.parent、div.child 两者的外边距相邻，所以此时会发生合并，并且取较大的值。

26. 常规流 - 图1

如果给 div.parent 添加上一条声明，border: 1px solid; 那么显示效果为：

26. 常规流 - 图2

因为此时两者的margin区域并不算是相邻，所以并不会发生合并。

小结

视觉格式化模型
- 概念：指的是布局规则，它规定页面中的多个盒子排列规则。
- 视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
  - 常规流
  - 浮动
  - 定位
Normal Flow
- containing block
  - 表示：包含块
  - 每个盒子都有它的包含块，包含块决定了盒子的排列区域。
  - 绝大部分情况下：盒子的包含块，为其父元素的内容盒。
- 排列规则
  1. 水平方向上
    - width、margin设置为 auto，都表示吸收剩余空间，且width的吸收能力更强；
    - margin如果设置为负数，那么相当于增大了父元素内容盒的宽度，即：增加了横向的剩余空间；
  2. 垂直方向上
    - height设置为auto，表示适应内容的高度，高度将由内容撑开；
    - margin设置为auto，相当于取默认值 0；
  3. 百分比取值
    - 除了 height 外，其他属性设置百分比值，是相对于父元素内容盒的宽度而定的。
    - height分情况讨论
      - 若父元素内容盒的高度是由子元素撑开，即：父元素的内容盒高度没有设置，那么height设置的百分比值无效；
      - 若父元素内容盒的高度已经定义号，那么height的百分比值，是相对于父元素的高度而定的；
  4. 相邻的垂直外边距会发生合并，取较大的值。