HTML文档流与元素类型基本介绍

1. 文档流

• 标准文档流

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

  一些微观表现：

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

  （2）高矮不齐，底边对齐

  （3）自动换行，一行写不完时，换行写

标准文档流分为两种等级：块级元素和行内元素；另外还有一种两种结合的行内块（内联块）元素（不属于标准文档流）

• 溢出文档流

  由overflow属性效果决定

• 脱离文档流

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

  脱离文档流方法：
  （1）position:absolute; 或者 position：fixed；
  （2）float:left; 或者 float: right;

2. 行元素

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

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

3. 块元素

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

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

4.行内块元素

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

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