标准文档流
就是一个默认的状态,所有元素在排版过程中都会按照从左到右,从上到下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。
标准文档流的三个现象
(1).空白折叠现象。
例如
<img src="images/01.png" alt="01"/><img src="images/01.png" alt="01"/>
想让这两张图片中间没有间隙,那么在代码的表现上也必须挨在一起。如果在两个图片的代码中间加入连续的空格,也会被折叠成一个。
(2).高矮不齐,底边对齐。
这个例子里面可以看出来,不管文字的大小有的多大,图片的大小有多大,都是底边对齐的。
(3).会自动换行。
标准文档流里面的元素等级
分为行内元素和块元素
1.行内元素
行内元素不能设置宽高,元素的高度由内容决定。
现在用的最多的就是无意义的span。
2.块元素
块元素自己独占一行。
块元素可以设置宽高。
如果不给块元素设置宽度,那么它的宽度是父容器的宽度。
如果不设置高度,那么它的的高度默认为包裹的内容,也就是由子元素来撑起。
常见的块级元素有:div,p,hn,ul,li等等。
块元素和行内元素的转化
可以通过display属性来相互转化。
比如对div进行操作。
div{
display: inline;
background-color: pink;
width: 400px;
height: 400px;
}
这时div就变成了行内元素,与此同时,它也将不能设置宽高,所以这里的宽高是没意义的。
对span进行操作。
span{
display: block;
width: 300px;
height: 300px;
background-color: green;
}
这时span就变成是块元素,此时的span能够设置高度和宽度;并且霸占一行,别人不能与之并排;如果不设置宽度,那么将撑满父亲。
标准文档流做网页的时候会因为这些规则使网页的制作变得困难,所以有时要脱离文档流。