学习中的问题：01标准文档流

标准文档流

就是一个默认的状态，所有元素在排版过程中都会按照从左到右，从上到下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准文档流的三个现象

(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能够设置高度和宽度；并且霸占一行，别人不能与之并排；如果不设置宽度，那么将撑满父亲。

标准文档流做网页的时候会因为这些规则使网页的制作变得困难，所以有时要脱离文档流。