标准文档流

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。当前面内容发生了变化，后面的内容位置也会随着发生变化。
HTML就是一种标准文档流文件。

标准流

HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

微观现象:

1. 空白折叠现象。（ HTML中所有的文字之间,如果有空格、换行、tab在浏览器加载时，连在一起的空白都将被折叠为一个空格显示。）
2. 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
3. 自动换行，元素内一行内容写满元素的width时会自动进行换行。
   

元素等级：

在标准流中，常见的加载等级：

• 块级元素
  • 独占一行，不能与其他任何标签并列。
  • 可以设置宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。如果不设置高度，会被内容自动撑开。
• 行内元素
  • 不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
  • 能与其他的行内和行内块元素并排一行显示。
  • 不论是否设置宽高，其宽度和高度只能被内容自动撑开。
    在HTML中，将标签分为了：文本级、容器级。
• 行内块元素
  • 可以设置宽、高。如果不设置宽高，要么以原始尺寸加载，要么被内容自动撑开。
  • 能与其他的行内和行内块元素并排一行显示。

常见的块状元素有：div、p、h1…h6、ol、ul、dl、table、address、blockquote、form等。大部分是容器级标签。
常见的行内元素有：a、span、i、em、strong、label等。大部分是文本级标签。
常见的行内块级元素有:img、input等。

从HTML的角度来讲，标签分为：
— 文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如p、span、a、b、i、u、em等。
— 容器级：标签内部可以存放任意内容，包含容器级标签。比如div、h1…h6、li、dt、dd等。
　　注意：p里面只能放文字、图片、表单元素，p里面不能放h和ul，p里面也不能放p。

显示模式display

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，可以通过display属性更改一个标签的显示模式。

属性值	作用
block	表示元素以块级元素模式加载，具有块级特点
inline	表示元素以行内元素模式加载，具有行内特点
inline-block	表示元素以行内块元素模式加载，具有行内块特点
none	表示标签及内部内容直接隐藏，让出原有标准流的位置

通过display 就可以将 实现块级元素与行内元素、行内块元素之间的相互转换了。

脱离标准流

display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下 加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准文档流的方法：

1. 浮动
2. 绝对定位
3. 固定定位