by <a >zhangxinxu</a> from <a >http://www.zhangxinxu.com</a><br />
本文地址：<a >http://www.zhangxinxu.com/wordpress/?p=1187</a></p>
<h3>一兰伤、display:table-cell屬性簡(jiǎn)述</h3>
<p><code>display:table-cell</code>屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，類似于<code>td</code>標(biāo)簽钧排。目前IE8+以及其他現(xiàn)代瀏覽器都是支持此屬性的敦腔，但是IE6/7只能對(duì)你說sorry了，這一事實(shí)也是大大制約了<code>display:table-cell</code>屬性在實(shí)際項(xiàng)目中的應(yīng)用（寫于2016年8月24日：時(shí)代在變恨溜，當(dāng)下符衔，是時(shí)候登上舞臺(tái)了）找前。</p>
<p>我們都知道，單元格有一些比較特別的屬性判族，例如元素的垂直居中對(duì)齊纸厉，關(guān)聯(lián)伸縮等，所以<code>display:table-cell</code>還是有不少潛在的使用價(jià)值的五嫂，雖說IE6/7不支持此屬性，但是幸運(yùn)的是肯尺，IE6/7一些亂糟糟的屬性與渲染沃缘，我們可以其他方法實(shí)現(xiàn)同樣或是類似的效果。</p>
<p>與其他一些display屬性類似则吟，<code>table-cell</code>同樣會(huì)被其他一些CSS屬性破壞槐臀，例如<code>float</code>, <code>position:absolute</code>，所以氓仲，在使用<code>display:table-cell</code>與<code>float:left</code>或是<code>position:absolute</code>屬性盡量不用同用水慨。設(shè)置了<code>display:table-cell</code>的元素對(duì)寬度高度敏感，對(duì)<code>margin</code>值無反應(yīng)敬扛，響應(yīng)<code>padding</code>屬性晰洒，基本上就是活脫脫的一個(gè)td標(biāo)簽元素了。</p>
<h3>二啥箭、display:table-cell與大小不固定元素的垂直居中</h3>
<p>使用<code>display:table-cell</code>讓大小不固定元素垂直居中已經(jīng)是很老的方法了谍珊，關(guān)于此應(yīng)用，我已經(jīng)在“<a >大小不固定的圖片急侥、多行文字的水平垂直居中</a>”這篇文章中有過介紹砌滞。<br />
<p>方便閱讀，這里再次展示下代碼：</p>
<div class="zxx_code">
<pre>
<span style="color:green;">/這里的大小是根據(jù)高寬上限128像素圖片設(shè)置的/</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> 結(jié)果如下圖：<br />
<p>這里有個(gè)demo地址坏怪，里面有<code>display:table-cell</code>實(shí)現(xiàn)大小不固定圖片垂直居中的效果展示贝润，您可以狠狠地點(diǎn)擊<a >這里</a>。</p>
<h3>二铝宵、display:table-cell與兩欄自適應(yīng)布局</h3>
<p>就在前不久打掘，看facebook好友動(dòng)態(tài)列表頁(yè)面前端代碼的時(shí)候才發(fā)現(xiàn)原來<code>display:table-cell</code>可以用在兩欄的自適應(yīng)布局上。<br />
<p>雖然IE6/7不認(rèn)識(shí)<code>display:table-cell</code>鹏秋，但是虧了其一向自以為是的渲染與解析胧卤，我們可以很幸運(yùn)的使用其他屬性實(shí)現(xiàn)幾乎一致的效果。<br />
<p>您可以狠狠地點(diǎn)擊這里：<a >display:table-cell下兩欄自適應(yīng)布局demo</a></p>
<p><strong>代碼展示：</strong><br />
本例中拼岳，左側(cè)為頭像枝誊，右側(cè)內(nèi)容自適應(yīng)。其中頭像部分使用了<code>float</code>屬性惜纸，左浮動(dòng)叶撒，IE8+以及Firefox绝骚、Chrome、Opera等現(xiàn)代瀏覽器右側(cè)使用了<code>display:table-cell</code>屬性祠够，結(jié)果就自適應(yīng)了压汪，很簡(jiǎn)單的代碼，很神奇的效果古瓤。<br />
<p>OK止剖，對(duì)于不認(rèn)識(shí)<code>display:table-cell</code>屬性的IE6/7呢？哦呵呵落君，很簡(jiǎn)單穿香，使用<code>display:inline-block</code>屬性代替<code>display:table-cell</code>就完全ok的啦！</p>
<p>原因在于：IE6/7下block屬性的元素對(duì)inline-block屬性是有反應(yīng)绎速，但是卻不是純潔的反應(yīng)皮获，而是怪蜀黍看到粉嫩小蘿莉的一點(diǎn)邪念，就是讓元素有個(gè)怪異的haslayout屬性纹冤。<span class="s">//zxx:大家似乎都喜歡用haslayout解析一些老IE下的一些怪異現(xiàn)象洒宝，但我自己打心底里是不認(rèn)同這個(gè)概念。</span></p>
<p>如果IE6/7是很標(biāo)準(zhǔn)的純潔的解釋<code>inline-block</code>屬性的話萌京，是無法實(shí)現(xiàn)自適應(yīng)的雁歌，右側(cè)的文字描述內(nèi)容會(huì)跑到頭像的下面，哦呵呵~~有點(diǎn)負(fù)負(fù)得正知残，以毒攻毒的意味将宪。代碼如下：</p>
<div class="zxx_code">
<pre>display:table-cell; *display:inline-block;</pre>
</div>
<p>就萬(wàn)事大吉，收工回家了橡庞。</p>
<p>在本例demo中较坛，右側(cè)內(nèi)容足夠多，所以寬度完整的撐開了扒最，如果內(nèi)容有限丑勤，則寬度就是內(nèi)容的寬度，此時(shí)想要讓某個(gè)元素（例如關(guān)閉按鈕）右側(cè)定位就會(huì)有問題吧趣，解決方法就是定義一個(gè)非常寬的寬度法竞，就像上面facebook截圖中的CSS屬性一樣，所以强挫，考慮到各種情況岔霸，更健壯耐用的CSS代碼應(yīng)如下：</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>這種兩欄的自適應(yīng)布局，不僅不要分別丈量與計(jì)算兩列的寬度俯渤，連“<a >頁(yè)面重構(gòu)鑫三無準(zhǔn)則 之無寬度準(zhǔn)則</a>”中absolute自適應(yīng)布局的頭像寬度都不需要亮了呆细，可以說是更加懶惰，更加直接的好方法八匠。</p>
<h3>三絮爷、display:table-cell下的等高布局</h3>
<p>table表格中的單元格最大的特點(diǎn)之一就是同一行列表元素都等高趴酣。所以，很多時(shí)候坑夯，我們需要等高布局的時(shí)候岖寞，就可以借助<code>display:table-cell</code>屬性。說到<code>table-cell</code>的布局柜蜈，不得不說一下“匿名表格元素創(chuàng)建規(guī)則”：</p>
<blockquote><p>
CSS2.1表格模型中的元素仗谆，可能不會(huì)全部包含在除HTML之外的文檔語(yǔ)言中。這時(shí)淑履，那些“丟失”的元素會(huì)被模擬出來隶垮，從而使得表格模型能夠正常工作。所有的表格元素將會(huì)自動(dòng)在自身周圍生成所需的匿名table對(duì)象鳖谈，使其符合table/inline-table、table-row阔涉、table- cell的三層嵌套關(guān)系缆娃。</p></blockquote>
<p>舉個(gè)例子吧，如果我們?yōu)樵厥褂谩癲isplay:table-cell;”屬性瑰排，而不將其父容器設(shè)置為“display:table-row;”屬性贯要，瀏覽器會(huì)默認(rèn)創(chuàng)建出一個(gè)表格行，就好像文檔中真的存在一個(gè)被聲明的表格行一樣椭住。如果您還不是很理解崇渗，可見參見支付寶UED的“<a target="_blank" >基于display:table的CSS布局</a>”一文揭保。<span class="s">//zxx:支付寶今年的招牌廣告做得很贊的~~</span></p>
<p>實(shí)現(xiàn)等高布局格粪，毫無疑問，<code>display:table-cell</code>是首選裆针，這就好比鼴鼠些举，生下來就是為了打洞用的跟狱。考慮到匿名創(chuàng)建表格元素的問題户魏，所有<code>table-cell</code>元素外一定要留有一個(gè)用來包裹的標(biāo)簽驶臊。于是，我們有類似下面的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;">/中間一個(gè)元素背景淡藍(lán)叼丑，有別于兩邊的淡灰色/</span>
.list_center{background-color:#f0f3f9;}
</pre>
</div>
<p>結(jié)果在現(xiàn)代瀏覽器下（如下Firefox3.6下截圖）：<br />
<p>您可以狠狠地點(diǎn)擊這里：
<a >table-cell等高布局demo</a></p>
<p>對(duì)于不支持display:table-cell屬性的IE6/7瀏覽器关翎，又當(dāng)如何解決呢？<br />
我們可以使用“補(bǔ)差等高法”鸠信，就是一個(gè)一個(gè)很大的<code>margin-bottom</code>負(fù)值配上一個(gè)同樣大小的<code>padding-bottom</code>值纵寝，本例中為了實(shí)例需要，<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>認(rèn)識(shí)<code>display:table-cell</code>屬性的元素對(duì)<code>margin</code>屬性不敏感闹啦，所以上面<code>margin-bottom</code>屬性前沒有加*號(hào)沮明。HTML結(jié)構(gòu)代碼如下：</p>
<div class="zxx_code">
<pre>
<div class="list_row">
<div class="list_cell">你一定也有過這種感覺的。...羅蘭《寂寞的感覺》</div>
<div class="list_cell list_center">作為一個(gè)被基阿異捅過...水窍奋，四積陰功五讀書荐健。</div>
<div class="list_cell">奔波了一...永遠(yuǎn)幸福快樂琳袄！</div>
</div>
</pre>
</div>
<p><span class="s">//zxx:“補(bǔ)差等高法”雖然有效江场，也有兼容性，但是會(huì)帶來一些潛在的問題窖逗，不宜多用址否。</span></p>
<h3>四、display:table-cell下的列表布局</h3>
<p>這里的列表布局專指橫向repeat的布局碎紊，就像下圖所示的：<br />
<p>一般這類布局都是使用浮動(dòng)的佑附。但是浮動(dòng)布局的不足在于：一是需要清除浮動(dòng)造成影響；二是不支持不定高列表的浮動(dòng)仗考。替代浮動(dòng)布局的方法是有的音同，如果深究細(xì)節(jié)以及一些思想，方法還不少秃嗜。其中有一個(gè)方法就是使用<code>display:table-cell</code>权均。</p>
<p>當(dāng)然，說句心里話锅锨，將<code>display:table-cell</code>屬性用在列表元素布局上叽赊，有點(diǎn)類似于張飛繡衣服，大馬拉小車必搞，優(yōu)勢(shì)并沒有多大發(fā)揮蛇尚，但是，畢竟也算浮動(dòng)布局的一個(gè)備用替換方案顾画。我的下一篇文章將會(huì)詳細(xì)講解浮動(dòng)布局的替換方案取劫，其中<code>table-cell</code>方法可以說是里面最不好的一個(gè)方法，本著過渡和熱身的目的研侣，這里只簡(jiǎn)單講過谱邪。</p>
<p>首先是效果：<br />
您可以狠狠地點(diǎn)擊這里：<a class="a_link" target="_blank" >display:table-cell下的列表布局</a></p>
<p>可以看到即使模塊高度不一致，也不會(huì)產(chǎn)生浮動(dòng)布局可能產(chǎn)生的錯(cuò)位庶诡。<br />
由于table-cell需要每行包裹一個(gè)獨(dú)立的標(biāo)簽惦银，所以，在后臺(tái)repeat輸出的時(shí)候，需要兩次循環(huán)扯俱，而是列數(shù)是限死的（與浮動(dòng)布局一樣）书蚪。對(duì)于簡(jiǎn)單的列表，使用display:table-cell是很難看到什么優(yōu)勢(shì)的迅栅，但是殊校，如果列表復(fù)雜，數(shù)據(jù)多读存，內(nèi)容細(xì)为流，display:table-cell可能會(huì)像大S訂婚的傳聞那樣讓人震驚。</p>
<p>好让簿，點(diǎn)到為止敬察，就說這些。我的下一篇文章還會(huì)講到此屬性的布局的尔当。</p>
<p><strong>更新于2016年8月24日</strong><br />
<code>display:table-cell</code>下的列表布局最適用的場(chǎng)景是：列表個(gè)數(shù)不固定莲祸，但是，無論列表幾個(gè)椭迎，都平分容器空間锐帜。什么意思呢？就是如果4個(gè)列表侠碧，希望每個(gè)寬度25%抹估，3個(gè)就33.3333%缠黍，2個(gè)列表希望每個(gè)寬度50%弄兜。此時(shí)，沒有比<code>display:table-cell</code>更合適的技術(shù)了瓷式。</p>
<p>父級(jí)設(shè)置<code>display:table</code>同時(shí)寬度為容器寬度替饿，或者直接<code>width:100%</code>，此時(shí)贸典，<code>display:table-cell</code>子元素就會(huì)自動(dòng)等分视卢。</p>
<h3>五、結(jié)語(yǔ)</h3>
<p>對(duì)于<code>display:table-cell</code>廊驼，我自己其實(shí)用的并不多据过，畢竟其特殊之處就在于垂直居中，等高妒挎，水平級(jí)聯(lián)绳锅，匿名創(chuàng)建等特性，其他種種屬性可以使用其他更好的<code>display</code>屬性代替的酝掩。但是話說回來鳞芙，不太使用display:table-cell屬性的真正的原因可能是對(duì)該屬性的了解的還不夠深入，可能該屬性本身是存在很多非常實(shí)用的應(yīng)用，但是自己由于掌握不夠而不知道原朝。所以驯嘱，要是哪位同行知道<code>display:table-cell</code>其他一些不錯(cuò)的應(yīng)用的話，歡迎大力補(bǔ)充喳坠，不甚感謝鞠评！</p>
<p>最后，時(shí)間倉(cāng)促丙笋，資質(zhì)有限谢澈，文中要是有表述不準(zhǔn)確的地方還望見諒，歡迎嚴(yán)厲地指正御板。</p>
本文為原創(chuàng)文章锥忿，轉(zhuǎn)載請(qǐng)注明來自<a >張?chǎng)涡?鑫空間-鑫生活</a>[<a >http://www.zhangxinxu.com</a>]<br />
本文地址：<a >http://www.zhangxinxu.com/wordpress/?p=1187</a>
<p>（本篇完）</p>
