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相关阅读