CSS基础之常规流

常规流

前置知识

盒模型: 规定单个盒子的规则.
视觉格式化模型(布局规则): 页面中的多个盒子的排列规则
视觉格式化模型, 大体上将页面中盒子的排列分为三种方式:

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

常规流布局

常规流, 也叫文档流, 普通文档流,常规文档流

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

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

包含块:( containing block): 每个盒子都有它的包含块, 包含块决定了盒子的排列区域.

绝大多数情况下, 盒子的包含块, 为其父元素的内容盒

块盒

1. 每个块盒的总宽度(border+ padding+ margin+ content), 必须刚好等于包含块的宽度

   宽度的默认值为auto
   margin的取值可以是auto, 也可以是0

   auto:这里是将剩余空间吸收掉(width的吸收能力比margin强)
   如宽度, 边距, 内边距, 外边距计算后 ,仍然有空间, 该剩余空间被margin-right全部吸收
   在常规流,块盒在其包含块中居中,可以定宽,然后左右margin设置为auto

2. 每个块盒垂直方向上的auto值
   height: auto 适应内容的高度
   margin: auto 表示为0

3. 百分比取值

padding, 宽高, margin(四个方向)可以取值为百分比

以上的所有百分比都是相对于包含快的宽度

高度百分比:
(1) 如果包含块的高度是取决于子元素的高度, 设置百分比无效.
如: 如果父元素是行盒, 其内容区宽高有子元素决定,而这时子元素设置百分比时,
以包含快的高度决定自己的高度,二者相互依赖,所以这时设置百分比无效

(2) 如果包含块的高度不取决于子元素的高度,百分比相对于父元素的高度

4. 上下外边距合并

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

两个外边距取最大值