前端CSS基础——常规流布局

常规流

常规流又称为文档流，是页面布局规则之一，所有元素在默认情况下都是常规流布局，它的总体规则是块盒独占一行，行盒水平依次排列。在了解常规流布局前，需要引入一个概念，包含块。

1. 包含块
   在绝大部分情况下，包含块指父类元素的内容盒content-box,每个盒子都有它的包含块，包含块决定了盒子之间的排列次序.

2. 块盒
   块盒一般指子元素的整个盒子模型，块盒的总宽度必须刚好等于包含块的宽度。

<div class="father">//content-box为包含块
	<div class="child">//整个盒子模型为块盒
	</div>
</div>

块盒的取值问题

1. 块盒的宽度
   块盒的宽度取值默认是auto,表示将剩余空间填充。例如包含块的宽度为1000px，而块盒的宽度未设定，则块盒的总宽度为1000px。
   当没有设置宽度时，块盒宽度等于包含块宽度。
   当设置宽度时，若块盒宽度不等于包含块宽度，则剩下空间由margin-right填充。
   margin的默认值为0，可以设定为auto。可以在设定宽度后，将margin的左右值设定为auto实现块盒的居中。
   包含块宽度（父类content-box宽度）= 块盒总宽度（块盒margin宽度+块盒border宽度+块盒padding宽度+块盒content宽度）

2. 块盒的高度
   块盒的高度适应于包含块的高度，若包含块没有设定高度，则块盒的高度随内容变化而变化，包含块高度=块盒高度（默认取值auto）

3. 百分比取值
   padding、margin的取值可以设定为百分比取值，但是它们所有百分比都相对于包含块的宽度。例如：