文档流 & 元素类型

文档流

标准文档流

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

一些微观表现：

• 行元素（包括行内块）间的缝隙现象。

• 高矮不齐，底边对齐。

• 自动换行，一行写不完时，换行写。

注意

CSS transform属性不会脱离文档流,也不会改变原来元素在文档流中的位置大小，只是对节点本身进行动画变形.

溢出文档流

由overflow属性效果决定。

脱离文档流

脱离文档流的元素是不会被父元素计算高度的，且脱离文档流的元素会拥有块级元素的特点。

脱离文档流方法：

• position:absolute/fixed
• float:left/right

元素类型

行元素

行元素属于标准文档流，常见默认行元素类型的标签主要有span ，strong，em等。其主要特点如下：

• 不可设置元素宽高相关属性。默认宽高为自身所包内容的宽高度（高度主要由line-height决定）。
• margin外边距只对左，右方向生效。
• padding内边距各方向均生效。
• 与其他行元素（包括行内块元素）在同一行。
• 与同行元素排列时元素间会默认存在间隙，即幽灵空白节点。
• 可通过设置css属性display:inline将其他类型元素转为行元素。

块元素

块元素属于标准文档流，常见默认块元素类型的标签主要有div，p，h1~h6，table，form等。其主要特点如下：

• 可设置元素宽高相关属性。默认宽度为父元素宽度（所以这种情况下不要重复设置width:100%）。
• margin，padding属性各方向都有效。
• 每个块元素默认独占一行。
• 可通过设置css属性display:block将其他类型元素转为块元素。

行内块元素

常见默认行内块元素类型的标签主要有img，input，td等。其主要特点如下：

• 可设置宽高相关属性，默认为自身内容宽高度。
• 与其他行元素（包括行内块元素）在同一行。
• margin，padding属性各方向都有效。
• 与同行元素排列时元素间会默认存在间隙，即幽灵空白节点。
• 可通过设置css属性display:inline-block将其他类型元素转为行内块元素。

幽灵空白节点

定义

如果一个行元素存在：

• 含有文字
• 保留空格
• 包含非0的margin或padding或border的inline元素
• 其他in-flow内容（图片、inline-block或inline-table元素）
• 以保留的换行符结束

上述任一情况，则会在该内联元素的前面生成一个宽度为0，透明且无法通过脚本获取的幽灵空白节点（strut），如strut...<span>...</span>。

如果上述都不符合，则该元素会被视作高度为0的line-box。

——张鑫旭《CSS世界》

消除幽灵空白节点的方法：

• 父元素设置font-size为0，子元素单独再设置字体大小：

<div style="font-size: 0">
    <span style="font-size: 16px">我是行内元素</span>
    <span style="font-size: 16px">我是行内元素</span>
</div>

• 改变元素类型，例如设置display:flex
• 设置浮动float
• ...