css之display属性

示例地址
在使用css的过程中，我发现诸如宽高，边框，背景等很多属性是非常浅显易懂的，关键是英文不好需要多写多记的，但是像display、盒子模型、定位这三部分才是基础。
本文简单介绍一下三种常用的display使用方式和一种不常用但又非常有用的使用方式

• inline
  inline就好比一个气球一样，自身没有宽和高，只有吹气的时候才会胀起来，元素的大小取决于填充内容

  css

  .inline {    display: inline;    width: 100px;    height: 100px;}

  dom

  <div class="inline">    hello world</div>

  显示效果
  

• inline-block
  inline-block就像一个橡皮泥一样，会按照我们规定的大小显示。在容器宽度允许的情况下会排在一行，容器宽度不够的话就会排到下一行
  css

  .inline-block {    display: inline-block;    width: 200px;    height: 100px;    background-color: #963;    text-align: center;}.i-b1{    background-color: #936;}.i-b2{    background-color: #396;}.i-b3{    background-color: #639;}

  dom

  <div class="inline-block">    inline-block 0</div><div class="inline-block i-b1">    inline-block 1</div><div class="inline-block i-b2">    inline-block 2</div><div class="inline-block i-b3">    inline-block 3</div>

  显示效果
  

• block
  block会占一整行，它的实际宽度是根据盒子模型计算出的宽度，默认宽度是100%，但是在block元素前后都会自动换行，因此一行内只有一个block元素
  css

.block {        display: block;        height: 100px;        width: 100px;        background-color: #f93;    }

dom

 <div>        <div class="block">block</div>        <div class="inline-block">            inline-block 0        </div>    </div>

显示效果

block的宽度不是100%，但也会占一整行。

• table-cell
  table-cell需要配合table一起使用，即外层容器为display:table;通常是为了解决多列div动态等高的问题。其实这是浏览器内部会将table>table-cell这样的结构同table>tr>td解释成一样，td的display就是table-cell.

css

 .table{        display: table;        width: 200px;        height: 50px;    }    .table-cell{        display: table-cell;    }

dom

 .table{        display: table;        width: 200px;        height: 50px;    }    .table-cell{        display: table-cell;    }

显示效果

table-cell相关阅读