css文档流的流动方向

通过此代码我们可发现,css文档流的流动方向是从左到右，从上到下依次排列的。

再仔细观察上图我们即可发现块级(block)元素，内联(inline)元素，内联块(inline-block)元素的区别。

三种元素流动方向上的区别

inline元素

观察 "第6个span元素" 我们可发现，内联(inline)元素会从左到右排列，宽度不够就会自动裁切换行。

block元素

观察 "第1个div元素" 和 "第2个div元素" 我们可发现，块级(block)元素始终独占一行，就算宽度窄到一行能同时容下两个div元素，它们也会选择独占一行显示(很傲娇的元素)。

inline-block元素

观察 "inline-block元素" 我们可发现，内联块(inline-block)元素只要宽度足够，一行可容纳多个inline-block元素，但又不会自动裁切换行，会始终保证自己的完整性。

三种元素宽度上的区别

  <span style="width: 50000px;">第1个span元素</span>
  <span>第2个span元素</span>
  <span>第3个span元素</span>
  <span>第4个span元素</span>
  <span>第5个span元素</span>
  <span>第6个span元素</span>
  <span>第7个span元素</span>
  <span>第8个span元素</span>
  <span>第9个span元素</span>
  <div style="width: 100px;">第1个div元素</div>
  <div style="width: 300px;">第2个div元素</div>
  <div style="width: auto;">第3个div元素</div>
  <div style="width: 100%;">第4个div元素</div>
  <div>第5个div元素</div>
  <div>第6个div元素</div>
  <span style="width: 300px;" class="ib">第1个inline-block</span>
  <span class="ib">第2个inline-block</span>
  <span class="ib">第3个inline-block</span>
  <span class="ib">第4个inline-block</span>
  <span class="ib">第5个inline-block</span>
  <span class="ib">第6个inline-block</span>
  <span class="ib">第7个inline-block</span>
  <span class="ib">第8个inline-block</span>
  <span class="ib">第9个inline-block</span>

显示效果

inline元素

观察代码中对第1个span元素的宽度设置，就算设置其宽度为50000px，它的宽度也不会有任何改变，而是根据其内容(内部inline元素的和)来指定宽度。

block元素

观察代码中对第1个div元素和第2个div元素的宽度设置我们可发现，block元素可以进行设置宽度。

观察代码中第3个div元素和第5个div元素我们就可发现它的默认宽度为width: auto;

观察代码中第4个div元素和第5个div元素我们可以发现，当宽度设置为width: 100%;时，第4个div元素会比默认值多出2个像素的宽度，这是因为当宽度设置为100%时，在渲染宽度时会"默认宽度+两边边框宽度"，所以看上去会比默认值多出2个像素(border左右两边宽度相加)的宽度。

inline-block元素

观察代码中第1个inline-block我们可发现，inline-block元素和block元素一样也能进行宽度设置。 观察代码中第2个inline-block我们可发现，inline-block元素默认宽度和inline元素一样，是根据其内容来指定的宽度。

三种元素高度上的区别

inline元素

<div>
  <span class="span1">span元素1</span>啦啦
</div>
  
  
<div style="margin:20px; "></div>

  
<div>
  <span class="span2">span元素2</span>
</div>
  
<div style="margin:20px; "></div>
  
<div>
  <span class="span3">span元素3</span>
</div>

   .span1{
        border: 1px red solid;
        padding:10px 20px;
    }

  .span2{
        border: 1px red solid;
        line-height:100px;
    }

.span3{
        border: 1px red solid;
        height:1000px;
    }

    div{
        border: 1px solid blue;
    }

   body{
       padding:20px;
   }

显示效果

代码中我用一个div元素（蓝框）来抱住span元素（红框），用来观察span元素的实际高度

观察span元素1我们可发现，尽管span元素1设置了上下padding高度为10px，但是蓝框区域却并没有随着红框区域的变高而变高，所以可知padding的大小与inline元素的高度无关。

观察span元素2我们可发现,蓝框随着span元素中line-height的增大而增大，所以我们可知inline元素的高度与line-height的高度有关。

观察span元素3我们可发现,height不会对inline元素的高度产生影响。

block元素

    <div class="xxx">第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1     个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素
    </div>

    <div class="div2 xxx">第2个div元素</div>

    <div class="xxx">
        第3个div元素
        <div class="div4">第4个div元素</div>
    </div>

    <div class="xxx">
        <div class="div5">
            第5个div元素
        </div>
    </div>

    div {
        border: 1px solid blue;
    }

    .div2 {
        height: 50px;
    }

    .div4 {
        height: 50px;
    }

    .div5 {
        position: absolute;
    }

    .xxx {
        margin: 10px 0;

    }

    body {
        padding: 20px;
    }

显示效果

观察第1个div元素我们可发现，block元素的高度会随着内容的增多而增高。

观察第2个div元素我们可发现,block元素可通过设置height来增加高度。

观察第3个div元素和第4个div元素我们可发现,第3个div元素的高度会被第4个div元素的高度而撑开。

观察第5个div元素我们可发现当div内的内容脱离文档流时，div的高度就会塌陷。

inline-block元素

在高度上inline-block元素与block元素相同

总结

流动方向

• inline 元素从左到右，到达最右边才会换行

• block 元素从上到下，每一个都另起一行

• inline-block 也是从左到右 宽度

• inline 宽度为内部 inline 元素的和，不能用 width 指定

• block 默认自动计算宽度，可用 width 指定

• inline-block 结合前两者特点，可用 width 高度

• inline 高度由 line-height 间接确定，跟 height 无关

• block 高度由内部文档流元素决定，可以设 height

• inline-block 跟 block 类似，可以设置 height