Html文档流
刚开始学习Html时，并没有太多的关注于行内元素、块级元素、文档的渲染过程等内容，直到后面学习Div+CSS布局时，在经过了各种的浮动、设置内外边距、边框等时，觉得布局好难的，原本，好好的布局，由于内容的改动或者内外边距的调整，从而导致了布局的变动，此时，才逐渐明白了文档流以及行内元素、块级元素的概念，今天再重新对这部分内容进行梳理，以更好的掌握。
一、什么是文档流
首先来看一个最简单的html文档，其代码内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>Java程序设计</li>
<li>ASP.NET程序设计</li>
<li>Html与CSS网页设计</li>
</ul>
<span>Hello</span>
<span>文档流</span>
<p>
这是一段文本字
</p>
</body>
</html>其页面结果如下：
学习Html时，都知道，页面中的内容是body标签内部的内容。从这个例子中，可以知道，Html页面在呈现时，是从上向下依次进行呈现的，也就是说，哪个元素在前面，就先呈现它。在body中，首先是ul标签，这是一个列表，其中li是列表项，从结果来看，每个li单独占一行，而紧随其后的两个span元素呢，并不是独占一行，而是两个span元素共同占一行。再后面的p标签，也是独占一行。这就是文档流。
Html文档流就是在呈现网页的内容时，从元素组织的顺序，即在Html文件中的顺序，按照从上向下，依次在屏幕上进行呈现。有些独占一行，有些共同占用一行。下面我们为这些元素添加边框来看一下，
二、行内元素（内联元素）与块级元素
从上面的图中，可以看出不同的标签，其呈现的结果是不同的，主要分为两种：一是独占一行，一是多个元素共同占一行。
块级元素：在页面中独占一行。无论其后是否还有空间，都不允许再放置其它内容。块级元素可以设置其宽度（默认为100%）、高度、内外边距等。并且可以容纳其它的块级元素和行内元素。
行内元素：多个行内元素共同占一行。而且多个行内元素之间并不是紧密相邻，而是有一个空格的距离。行内元素不能设置高度和宽度，对于内外边距只能设置左右，不能设置上下的。行内元素可以容纳文本和其它行内元素。
块级元素：
| 标签 | 描述 |
|---|---|
| <address> | 定义地址。 |
| <article> | 定义文章。 |
| <aside> | 定义页面内容之外的内容。 |
| <audio> | 定义声音内容。 |
| <blockquote> | 定义长的引用。 |
| <canvas> | 定义图形。 |
| <caption> | 定义表格标题。 |
| <dd> | 定义定义列表中项目的描述。 |
| <div> | 定义文档中的节。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义列表中的项目。 |
| <details> | 定义元素的细节。 |
| <fieldset> | 定义围绕表单中元素的边框。 |
| <figcaption> | 定义 figure 元素的标题。 |
| <figure> | 定义媒介内容的分组，以及它们的标题。 |
| <footer> | 定义 section 或 page 的页脚。 |
| <form> | 定义供用户输入的 HTML 表单。 |
| <h1> to <h6> | 定义 HTML 标题。 |
| <header> | 定义 section 或 page 的页眉。 |
| <hr> | 定义水平线。 |
| <legend> | 定义 fieldset 元素的标题。 |
| <li> | 定义列表的项目。 |
| <menu> | 定义命令的列表或菜单。 |
| <meter> | 定义预定义范围内的度量。 |
| <nav> | 定义导航链接。 |
| <noframes> | 定义针对不支持框架的用户的替代内容。 |
| <noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
| <ol> | 定义有序列表。 |
| <output> | 定义输出的一些类型。 |
| <p> | 定义段落。 |
| <pre> | 定义预格式文本。 |
| <section> | 定义 section。 |
| <table> | 定义表格。 |
| <tbody> | 定义表格中的主体内容。 |
| <td> | 定义表格中的单元。 |
| <tfoot> | 定义表格中的表注内容（脚注）。 |
| <th> | 定义表格中的表头单元格。 |
| <thead> | 定义表格中的表头内容。 |
| <time> | 定义日期/时间。 |
| <tr> | 定义表格中的行。 |
| <ul> | 定义无序列表。 |
行内元素：
| 标签 | 描述 |
|---|---|
| <a> | 定义锚。 |
| <abbr> | 定义缩写。 |
| <acronym> | 定义只取首字母的缩写。 |
| <b> | 定义粗体字 |
| <bdo> | 定义文字方向。 |
| <big> | 定义大号文本。 |
| <br> | 定义简单的折行。 |
| <button> | 定义按钮 (push button)。 |
| <cite> | 定义引用(citation)。 |
| <code> | 定义计算机代码文本。 |
| <command> | 定义命令按钮。 |
| <dfn> | 定义定义项目。 |
| <del> | 定义被删除文本。 |
| <em> | 定义强调文本。 |
| <embed> | 定义外部交互内容或插件。 |
| <i> | 定义斜体字。 |
| <img> | 定义图像。 |
| <input> | 定义输入控件。 |
| <kbd> | 定义键盘文本。 |
| <label> | 定义 input 元素的标注。 |
| <map> | 定义图像映射。 |
| <mark> | 定义有记号的文本。 |
| <objec> | 定义内嵌对象。 |
| <progress> | 定义任何类型的任务的进度。 |
| <q> | 定义短的引用。 |
| <samp> | 定义计算机代码样本。 |
| <select> | 定义选择列表（下拉列表）。 |
| <small> | 定义小号文本。 |
| <span> | 定义文档中的节。 |
| <strong> | 定义强调文本。 |
| <sub> | 定义下标文本。 |
| <sup> | 定义上标文本。 |
| <textarea> | 定义多行的文本输入控件。 |
| <time> | 定义日期/时间。 |
| <tt> | 定义打字机文本。 |
| <var> | 定义文本的变量部分。 |
| <video> | 定义视频。 |
| <wbr> | 定义可能的换行符。 |
三、行内元素（内联元素）与块级元素的相关设置
行内元素与块级元素可以通过其display属性进行设置
display:block;设置行内元素为块级元素
display:inline;设置块级元素为行内元素
将上例中的样式修改为以下内容：
li{
display: inline;
border: 1px solid green;
}
span{
display: block;
border: 1px solid blue;
}
p{
border: 1px solid red;
}页面结果如下：
通过结果，发现原来li是块级元素，现在变成了行内元素，而span原来是行内元素，现在变成了块级元素。
总结：
块级元素总是独占一行，并且可以设置其宽度和高度，因此，主要用来呈现大块的内容，并容纳其它的块级元素和行内元素。
行内元素总是多个元素呈现在一行内，因此，行内元素主要用来呈现某一块内的细节部分。
来源：oschina
链接：https://my.oschina.net/u/3537796/blog/2995412