你不知道的常规流

常规流

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

视觉格式化模型：页面中多个盒子的排列规则

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

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

常规流布局

几种说法： 常规流、文档流、普通文档流、常规文档流

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

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

包含块（containing block ） ： 每个盒子都有它的包含块，包含块决定了盒子的排列区域（坐标系）

绝大数情况下盒子的包含块是父元素的内容盒

块盒

1. 每个块盒的总宽度必须等于包含块的宽度

宽度的默认值为 auto (将剩余的宽度值吸收掉)
margin 的也可以设置为auto , margin的默认值为0
width的吸收能力强于margin,就是width和margin 同时设置为auto width先吸收

若宽度，填充，边框，外边距计算后仍然有剩余空间，则所有的剩余空间都会被margin-right吸收。

在常规流中 块盒在其包含块中居中，可以定宽，左右margin的值设置为auto。
2. 每个块盒子垂直方向的auto值
hight : auto 适应内容的高度
margin ： 设置为0
3. 百分比取值
宽度，padding，margin 可以设置成百分比

以上的所有的百分比都是相对于包含块的宽度（和高度没有什么关系）

高度的百分比

1). 包含块的高度是否取决于子元素的高度，高度为auto，设置百分比无效
2). 包含块的高度不取决于子元素的高度，百分比相对于父元素的百分比
4. 上下外边距合并
两个常规流块盒子，上下外边距相邻（包括父、子元素相邻），会进行合并（两个外边距取最大值）