11.5常规流

常规流

视觉格式化模型(布局规则)：页面中多个盒子排列规则

大体将页面中盒子的排列分为三种

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

常规流布局

所有元素默认均为常规流布局

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

包含块：每个盒子都有它的包含块，其决定了盒子的排列区域

基本上：盒子的包含块为其父元素的内容盒

块盒

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

宽度的默认值为auto

auto：自动填满剩余空间

width用auto的优先级高于margin

若盒子的宽度没有填满包含块，则剩余宽度全给margin-right

若盒子的宽度没有填满包含块，且margin-left、margin-right均设为auto，那么左右两边margin值相等，则盒子居中

因为盒子的总宽度必须等于包含块的宽度，所以当margin的值设为负数，width:auto的时候，随着margin不断变小，宽度会不断变大，甚至可以超过包含块的宽度

2. 每个块盒垂直方向上的auto值

height:auto，适应内容的高度

margin:auto，表示0

3. 百分比取值

padding，width，margin可以取值为百分比

以上所有百分比相对于包含块的宽度

高度的百分比

• 包含块如果没有设置高度，则包含块的高度取决于子元素的高度，那么这种情况下高度设置百分比无效
• 包含块如果设置了高度，则子元素的高度百分比相对于包含块高度

4. 上下外边距的合并

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

合并的时候取最大值

父子元素间相邻的外边距也会合并