标准文档流

标准文档流

说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准流的微观现象：
(1).空白折叠现象。比如，如果我们想让img标签之间没有空隙，必须紧密连接。
<img src="img/00.jpg"/><img src="img/02.jpg"/>
(2)高矮不齐，底边对齐 
(3)自动换行，一行写不完时，换行写

标准文档流等级

分为两种等级：块级元素和行内元素； 
块级元素： （p、 div 、h 、ul 、ol 、dl 、li 、dt 、dd ）
1).霸占一行，不能与其他任何元素并列 
2).能接受宽、高 
3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽 
行内元素： （span,   strong,   em,  br,  img ,  input,  label,  select,  textarea, ）
1).与其他元素并排 
2).不能设置宽、高。默认的宽度就是文字的宽度 
在HTML中，标签分为：文本级和容器级； 
文本级：p、span、a、b、i、u、em 
容器级：div、h系列、ul、dl、ol、li、dt、dd 

块级元素与行内元素的相互转换

块级元素可以设置为行内元素； 行内元素也可以设置为块级元素。 
举个例子：

div{            display: inline;            background-color: pink;            width: 400px;            height: 400px;        }
1
2
3
4
5
6
7

display是显示模式，用来改变元素的行内、块级性质 
，一旦给一个标签设置display:inline;那么这个标签立即变为行内元素。此时div和span没有什么区别，此时的div不能设置宽度和高度div可以和别人并排

同理

span{            display: block;            width: 300px;            height: 300px;            background-color: green;        }
1
2
3
4
5
6

此span标签变为块级元素，与div无异；此时的span能够设置高度和宽度；并且霸占一行，别人不能与之并排；如果不设置宽度，那么将撑满父亲。