CSS布局学习（三） - Normal Flow 正常布局流(官网直译)

 

默认情况下，元素是如何布局？

首先，取得元素的内容，加上内边距（padding），边框（border），外边距（margin）放在一个盒子中 - 这就是我们之前看到的盒子模型

默认情况下，块级元素的内容宽度是其父元素宽度的100%，高度与其父元素相同。行内元素的高度与高度对应其内容的宽度与高度。不能设置行内元素的width与height - 它们位于块级元素的内容区。如果你想要设置行内元素的尺寸，需要将其设置为块级元素相类似的元素，可以以设置display:block这种方式实现（或者dispaly:inline-block；inline-block混合了inline与block的特性）

这解释了独立元素的布局，但是元素之间如何相互影响呢？正常布局流是一套在浏览器可视区域内放置排列元素的系统。默认情况下，块级元素是按照块出现在文档书写模式的方向放置 - 每一个块级元素出现在上一个块级元素的下一行，它们会自身设置好的margin分隔。因此，在英语，其它水平的，自上而下的书写模式中，块级元素都是垂直排列的。

 

行内元素的表现有所不同 - 它们不会另起一行；只要它们的父级块级元素的宽度足够，它们会与其它行内元素，相邻的文本内容出现在同一行。如果空间不够，那么溢出的文本或者行内元素就会移到新的一行。

如果相邻的两个元素都设置了margin并且两个margin有重叠，那么更大的margin被保留，小的消失 - 这种现象叫做外边距叠加