by <a href="http://www.zhangxinxu.com/">zhangxinxu</a> from <a href="http://www.zhangxinxu.com/">http://www.zhangxinxu.com</a><br />
本文地址：<a href="http://www.zhangxinxu.com/wordpress/?p=1187">http://www.zhangxinxu.com/wordpress/?p=1187</a></p>
<h3>一、display:table-cell属性简述</h3>
<p><code>display:table-cell</code>属性指让标签元素以表格单元格的形式呈现，类似于<code>td</code>标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了<code>display:table-cell</code>属性在实际项目中的应用（写于2016年8月24日：时代在变，当下，是时候登上舞台了）。</p>
<p>我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以<code>display:table-cell</code>还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。</p>
<p>与其他一些display属性类似，<code>table-cell</code>同样会被其他一些CSS属性破坏，例如<code>float</code>, <code>position:absolute</code>，所以，在使用<code>display:table-cell</code>与<code>float:left</code>或是<code>position:absolute</code>属性尽量不用同用。设置了<code>display:table-cell</code>的元素对宽度高度敏感，对<code>margin</code>值无反应，响应<code>padding</code>属性，基本上就是活脱脱的一个td标签元素了。</p>
<h3>二、display:table-cell与大小不固定元素的垂直居中</h3>
<p>使用<code>display:table-cell</code>让大小不固定元素垂直居中已经是很老的方法了，关于此应用，我已经在“<a href="http://www.zhangxinxu.com/wordpress/?p=61">大小不固定的图片、多行文字的水平垂直居中</a>”这篇文章中有过介绍。<br />
<p>方便阅读，这里再次展示下代码：</p>
<div class="zxx_code">
<pre>
<span style="color:green;">/这里的大小是根据高宽上限128像素图片设置的/</span>
div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}
div img{vertical-align:middle;}
</pre>
</div>
<p> 结果如下图：<br />
<p>这里有个demo地址，里面有<code>display:table-cell</code>实现大小不固定图片垂直居中的效果展示，您可以狠狠地点击<a href="http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html">这里</a>。</p>
<h3>二、display:table-cell与两栏自适应布局</h3>
<p>就在前不久，看facebook好友动态列表页面前端代码的时候才发现原来<code>display:table-cell</code>可以用在两栏的自适应布局上。<br />
<p>虽然IE6/7不认识<code>display:table-cell</code>，但是亏了其一向自以为是的渲染与解析，我们可以很幸运的使用其他属性实现几乎一致的效果。<br />
<p>您可以狠狠地点击这里：<a href="http://www.zhangxinxu.com/study/201010/table-cell-two-column-flow-layout.html">display:table-cell下两栏自适应布局demo</a></p>
<p><strong>代码展示：</strong><br />
本例中，左侧为头像，右侧内容自适应。其中头像部分使用了<code>float</code>属性，左浮动，IE8+以及Firefox、Chrome、Opera等现代浏览器右侧使用了<code>display:table-cell</code>属性，结果就自适应了，很简单的代码，很神奇的效果。<br />
<p>OK，对于不认识<code>display:table-cell</code>属性的IE6/7呢？哦呵呵，很简单，使用<code>display:inline-block</code>属性代替<code>display:table-cell</code>就完全ok的啦！</p>
<p>原因在于：IE6/7下block属性的元素对inline-block属性是有反应，但是却不是纯洁的反应，而是怪蜀黍看到粉嫩小萝莉的一点邪念，就是让元素有个怪异的haslayout属性。<span class="s">//zxx:大家似乎都喜欢用haslayout解析一些老IE下的一些怪异现象，但我自己打心底里是不认同这个概念。</span></p>
<p>如果IE6/7是很标准的纯洁的解释<code>inline-block</code>属性的话，是无法实现自适应的，右侧的文字描述内容会跑到头像的下面，哦呵呵~~有点负负得正，以毒攻毒的意味。代码如下：</p>
<div class="zxx_code">
<pre>display:table-cell; *display:inline-block;</pre>
</div>
<p>就万事大吉，收工回家了。</p>
<p>在本例demo中，右侧内容足够多，所以宽度完整的撑开了，如果内容有限，则宽度就是内容的宽度，此时想要让某个元素（例如关闭按钮）右侧定位就会有问题，解决方法就是定义一个非常宽的宽度，就像上面facebook截图中的CSS属性一样，所以，考虑到各种情况，更健壮耐用的CSS代码应如下：</p>
<div class="zxx_code">
<pre>display:table-cell; *display:inline-block; width:2000px; *width:auto;</pre>
</div>
<p>或者使用：</p>
<div class="zxx_code">
<pre>display:table-cell; width:2000px; *width:auto; *zoom:1;</pre>
</div>
<p>这种两栏的自适应布局，不仅不要分别丈量与计算两列的宽度，连“<a href="http://www.zhangxinxu.com/wordpress/?p=1152">页面重构鑫三无准则 之无宽度准则</a>”中absolute自适应布局的头像宽度都不需要亮了，可以说是更加懒惰，更加直接的好方法。</p>
<h3>三、display:table-cell下的等高布局</h3>
<p>table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助<code>display:table-cell</code>属性。说到<code>table-cell</code>的布局，不得不说一下“匿名表格元素创建规则”：</p>
<blockquote><p>
CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。</p></blockquote>
<p>举个例子吧，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。如果您还不是很理解，可见参见支付宝UED的“<a target="_blank" href="http://ued.alipay.com/wd/2008/10/29/%E5%9F%BA%E4%BA%8Edisplaytable%E7%9A%84css%E5%B8%83%E5%B1%80/">基于display:table的CSS布局</a>”一文。<span class="s">//zxx:支付宝今年的招牌广告做得很赞的~~</span></p>
<p>实现等高布局，毫无疑问，<code>display:table-cell</code>是首选，这就好比鼹鼠，生下来就是为了打洞用的。考虑到匿名创建表格元素的问题，所有<code>table-cell</code>元素外一定要留有一个用来包裹的标签。于是，我们有类似下面的CSS代码：</p>
<div class="zxx_code">
<pre>
.list_row{display:table-row;}
.list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;}
<span style="color:green;">/中间一个元素背景淡蓝，有别于两边的淡灰色/</span>
.list_center{background-color:#f0f3f9;}
</pre>
</div>
<p>结果在现代浏览器下（如下Firefox3.6下截图）：<br />
<p>您可以狠狠地点击这里：
<a href="http://www.zhangxinxu.com/study/201010/table-cell-equal-height-layout.html">table-cell等高布局demo</a></p>
<p>对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？<br />
我们可以使用“补差等高法”，就是一个一个很大的<code>margin-bottom</code>负值配上一个同样大小的<code>padding-bottom</code>值，本例中为了实例需要，<code>margin-bottom</code>值就百来像素。显然，由于两者原理不同，难免需要用到hack，所以demo完整CSS代码如下</p>
<code>
<div class="zxx_code">
<pre>
.list_row{display:table-row; overflow:hidden;}
.list_cell{display:table-cell; width:30%; margin-bottom:-100px; padding:1.6%; *padding-bottom:110px; background-color:#f5f5f5; *float:left;}
.list_center{background-color:#f0f3f9;}
</pre>
</div>
</code>
<p>认识<code>display:table-cell</code>属性的元素对<code>margin</code>属性不敏感，所以上面<code>margin-bottom</code>属性前没有加*号。HTML结构代码如下：</p>
<div class="zxx_code">
<pre>
<div class="list_row">
<div class="list_cell">你一定也有过这种感觉的。...罗兰《寂寞的感觉》</div>
<div class="list_cell list_center">作为一个被基阿异捅过...水，四积阴功五读书。</div>
<div class="list_cell">奔波了一...永远幸福快乐！</div>
</div>
</pre>
</div>
<p><span class="s">//zxx:“补差等高法”虽然有效，也有兼容性，但是会带来一些潜在的问题，不宜多用。</span></p>
<h3>四、display:table-cell下的列表布局</h3>
<p>这里的列表布局专指横向repeat的布局，就像下图所示的：<br />
<p>一般这类布局都是使用浮动的。但是浮动布局的不足在于：一是需要清除浮动造成影响；二是不支持不定高列表的浮动。替代浮动布局的方法是有的，如果深究细节以及一些思想，方法还不少。其中有一个方法就是使用<code>display:table-cell</code>。</p>
<p>当然，说句心里话，将<code>display:table-cell</code>属性用在列表元素布局上，有点类似于张飞绣衣服，大马拉小车，优势并没有多大发挥，但是，毕竟也算浮动布局的一个备用替换方案。我的下一篇文章将会详细讲解浮动布局的替换方案，其中<code>table-cell</code>方法可以说是里面最不好的一个方法，本着过渡和热身的目的，这里只简单讲过。</p>
<p>首先是效果：<br />
您可以狠狠地点击这里：<a class="a_link" target="_blank" href="http://www.zhangxinxu.com/study/201010/table-cell-list-flow-layout.html">display:table-cell下的列表布局</a></p>
<p>可以看到即使模块高度不一致，也不会产生浮动布局可能产生的错位。<br />
由于table-cell需要每行包裹一个独立的标签，所以，在后台repeat输出的时候，需要两次循环，而是列数是限死的（与浮动布局一样）。对于简单的列表，使用display:table-cell是很难看到什么优势的，但是，如果列表复杂，数据多，内容细，display:table-cell可能会像大S订婚的传闻那样让人震惊。</p>
<p>好，点到为止，就说这些。我的下一篇文章还会讲到此属性的布局的。</p>
<p><strong>更新于2016年8月24日</strong><br />
<code>display:table-cell</code>下的列表布局最适用的场景是：列表个数不固定，但是，无论列表几个，都平分容器空间。什么意思呢？就是如果4个列表，希望每个宽度25%，3个就33.3333%，2个列表希望每个宽度50%。此时，没有比<code>display:table-cell</code>更合适的技术了。</p>
<p>父级设置<code>display:table</code>同时宽度为容器宽度，或者直接<code>width:100%</code>，此时，<code>display:table-cell</code>子元素就会自动等分。</p>
<h3>五、结语</h3>
<p>对于<code>display:table-cell</code>，我自己其实用的并不多，毕竟其特殊之处就在于垂直居中，等高，水平级联，匿名创建等特性，其他种种属性可以使用其他更好的<code>display</code>属性代替的。但是话说回来，不太使用display:table-cell属性的真正的原因可能是对该属性的了解的还不够深入，可能该属性本身是存在很多非常实用的应用，但是自己由于掌握不够而不知道。所以，要是哪位同行知道<code>display:table-cell</code>其他一些不错的应用的话，欢迎大力补充，不甚感谢！</p>
<p>最后，时间仓促，资质有限，文中要是有表述不准确的地方还望见谅，欢迎严厉地指正。</p>
本文为原创文章，转载请注明来自<a href="http://www.zhangxinxu.com/">张鑫旭-鑫空间-鑫生活</a>[<a href="http://www.zhangxinxu.com/">http://www.zhangxinxu.com</a>]<br />
本文地址：<a href="http://www.zhangxinxu.com/wordpress/?p=1187">http://www.zhangxinxu.com/wordpress/?p=1187</a>
<p>（本篇完）</p>
