Html文档流
刚开始学习Html时，并没有太多的关注于行内元素、块级元素、文档的渲染过程等内容，直到后面学习Div+CSS布局时，在经过了各种的浮动、设置内外边距、边框等时，觉得布局好难的，原本，好好的布局，由于内容的改动或者内外边距的调整，从而导致了布局的变动，此时，才逐渐明白了文档流以及行内元素、块级元素的概念，今天再重新对这部分内容进行梳理，以更好的掌握。
一、什么是文档流
首先来看一个最简单的html文档，其代码内容如下：
Document- Java程序设计
- ASP.NET程序设计
- Html与CSS网页设计
Hello
文档流
这是一段文本字
其页面结果如下：
学习Html时，都知道，页面中的内容是body标签内部的内容。从这个例子中，可以知道，Html页面在呈现时，是从上向下依次进行呈现的，也就是说，哪个元素在前面，就先呈现它。在body中，首先是ul标签，这是一个列表，其中li是列表项，从结果来看，每个li单独占一行，而紧随其后的两个span元素呢，并不是独占一行，而是两个span元素共同占一行。再后面的p标签，也是独占一行。这就是文档流。
Html文档流就是在呈现网页的内容时，从元素组织的顺序，即在Html文件中的顺序，按照从上向下，依次在屏幕上进行呈现。有些独占一行，有些共同占用一行。下面我们为这些元素添加边框来看一下，
二、行内元素(内联元素)与块级元素
从上面的图中，可以看出不同的标签，其呈现的结果是不同的，主要分为两种：一是独占一行，一是多个元素共同占一行。
块级元素：在页面中独占一行。无论其后是否还有空间，都不允许再放置其它内容。块级元素可以设置其宽度(默认为100%)、高度、内外边距等。并且可以容纳其它的块级元素和行内元素。
行内元素：多个行内元素共同占一行。而且多个行内元素之间并不是紧密相邻，而是有一个空格的距离。行内元素不能设置高度和宽度，对于内外边距只能设置左右，不能设置上下的。行内元素可以容纳文本和其它行内元素。
块级元素：
标签
描述
定义地址。
定义文章。
定义页面内容之外的内容。
定义声音内容。
定义长的引用。
定义图形。
定义表格标题。
定义定义列表中项目的描述。
定义文档中的节。
定义定义列表。
定义定义列表中的项目。
定义元素的细节。
定义围绕表单中元素的边框。
定义 figure 元素的标题。
定义媒介内容的分组，以及它们的标题。
定义 section 或 page 的页脚。
定义供用户输入的 HTML 表单。
to
定义 HTML 标题。
定义 section 或 page 的页眉。
定义水平线。
定义 fieldset 元素的标题。
定义列表的项目。
定义命令的列表或菜单。
定义预定义范围内的度量。
定义导航链接。
定义针对不支持框架的用户的替代内容。
定义针对不支持客户端脚本的用户的替代内容。
定义有序列表。
定义输出的一些类型。
定义段落。
定义预格式文本。
定义 section。
定义表格。
定义表格中的主体内容。
定义表格中的单元。
定义表格中的表注内容(脚注)。
定义表格中的表头单元格。
定义表格中的表头内容。
定义日期/时间。
定义表格中的行。
定义无序列表。
行内元素：
标签
描述
定义锚。
定义缩写。
定义只取首字母的缩写。
定义粗体字
定义文字方向。
定义大号文本。
定义简单的折行。
定义按钮 (push button)。
定义引用(citation)。
定义计算机代码文本。
定义命令按钮。
定义定义项目。
定义被删除文本。
定义强调文本。
定义外部交互内容或插件。
定义斜体字。
定义图像。
定义输入控件。
定义键盘文本。
定义 input 元素的标注。
定义图像映射。
定义有记号的文本。
定义内嵌对象。
定义任何类型的任务的进度。
定义短的引用。
定义计算机代码样本。
定义选择列表(下拉列表)。
定义小号文本。
定义文档中的节。
定义强调文本。
定义下标文本。
定义上标文本。
定义多行的文本输入控件。
定义日期/时间。
定义打字机文本。
定义文本的变量部分。
定义视频。
定义可能的换行符。
三、行内元素(内联元素)与块级元素的相关设置
行内元素与块级元素可以通过其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原来是行内元素，现在变成了块级元素。
总结：
块级元素总是独占一行，并且可以设置其宽度和高度，因此，主要用来呈现大块的内容，并容纳其它的块级元素和行内元素。
行内元素总是多个元素呈现在一行内，因此，行内元素主要用来呈现某一块内的细节部分。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
