display: table-cell 的特性及其运用

零碎知识

特性

要想很好地运用它，首先要了解 display: table-cell 有哪样一些特性。

此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

这是 W3C 官方的解释，跟没说一样。实际上它的主要特性是：可接受 padding，不接受 margin，可伸缩的宽度。前两个特性很好理解，最后一个特性比较复杂。

可伸缩的宽度

设置了 display: table-cell 的元素是行内元素，同时也能够设置宽度和高度。

不同于 display: inline-block 的是，设置了 display: table-cell 的元素的宽度都是可以改变的。即使设置了 width 属性，它的宽度也能够改变。当宽度设置得太大，父盒子装不下的时候它的宽度会自动地缩小，而不会像 inline-block 一样覆盖到父盒子以外。（如果设置 min-width 的话，依然会可以产生这种情况）

特殊的宽度算法

它的宽度同样可以写固定值或者百分比，只是它的实际宽度会与一般元素有所不同。

<div class="parent">
    <div class="cell1">cell1</div>
    <div class="cell2">cell2</div>
</div>

在父元素 parent 设置了 display: table 以及 width: 800px 的情况下。即使两个子盒子的宽度都设置为30%或者都设置为100px，这两个子盒子也会撑满整个父盒子，它们会按照所设置的宽度的比例来分配宽度，也就是说这两个盒子的实际宽度都将是400px。

而如果子盒子设置了大于父盒子的宽度，那么他们会按照比例缩小子盒子。比如两个子盒子分别设置了1000px 和2000px，那么他们的实际宽度将会是273px 和527px。

另外，两子盒子分别设置固定宽度和百分比时，以百分比为准。

在父元素没有设置 display： table的情况下，两个子盒子的宽度就不一定会撑满父盒子了，但是同样不会超出父盒子之外。在这种情况下如果设置百分比宽度，浏览器会固定宽度除以百分比的方式得出总宽度，然后再计算出每一个盒子的宽度。比如 cell1设置为200px，cell2设置为20%时，他们的实际宽度分别会是200px 和50px。

以上情况下，如果没有设置固定宽度，那么浏览器将在保证每一个盒子都不小于最小宽度（盒子内容的宽度或者 min-width 属性）的情况下使整个表格尽可能地小，同时比例不会改变。

应用

垂直居中

这应该是大家都很熟悉了的应用，在父盒子中设置 display: table，子盒子中设置 display: table-cell 和vertical-align: middle 就可以实现大小不固定盒子的垂直居中。

划分等宽区块

以往的方式中同一行中的几个等宽区块，比如产品陈列。宽度如果都写死就没有办法做到响应式。宽度如果都写成百分比，border 和padding 就没有办法再使用固定值。使用 display: table-cell 就可以很好地解决这个问题，因为它的宽度是自适应的，即使设置了固定的 border 和padding 它也不会出现填不满或者换行的情况。

弹性两栏式布局

比如说要实现左侧固定宽度，右侧宽度自适应的情况。给左边盒子设置 min-width，右边的盒子设置 width: 100%;就可以实现。

两盒子等高

给父盒子设置 display: table，给 cell2设置 display: table-cell，不设置高度。这样 cell2的高度就会随着 cell1的高度变化而变化。