一、display:table-cell屬性簡(jiǎn)述

display:table-cell屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，類似于td標(biāo)簽。目前IE8+以及其他現(xiàn)代瀏覽器都是支持此屬性的，但是IE6/7只能對(duì)你說(shuō)sorry了，這一事實(shí)也是大大制約了display:table-cell屬性在實(shí)際項(xiàng)目中的應(yīng)用。

我們都知道，單元格有一些比較特別的屬性，例如元素的垂直居中對(duì)齊，關(guān)聯(lián)伸縮等，所以display:table-cell還是有不少潛在的使用價(jià)值的，雖說(shuō)IE6/7不支持此屬性，但是幸運(yùn)的是，IE6/7一些亂糟糟的屬性與渲染，我們可以其他方法實(shí)現(xiàn)同樣或是類似的效果。

與其他一些display屬性類似，table-cell同樣會(huì)被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性盡量不用同用。設(shè)置了display:table-cell的元素對(duì)寬度高度敏感，對(duì)margin值無(wú)反應(yīng)，響應(yīng)padding屬性，基本上就是活脫脫的一個(gè)td標(biāo)簽元素了。

二、display:table-cell與大小不固定元素的垂直居中

使用display:table-cell讓大小不固定元素垂直居中已經(jīng)是很老的方法了，關(guān)于此應(yīng)用，我已經(jīng)在“大小不固定的圖片、多行文字的水平垂直居中”這篇文章中有過(guò)介紹。

方便閱讀，這里再次展示下代碼：

就萬(wàn)事大吉，收工回家了。

在本例demo中，右側(cè)內(nèi)容足夠多，所以寬度完整的撐開了，如果內(nèi)容有限，則寬度就是內(nèi)容的寬度，此時(shí)想要讓某個(gè)元素（例如關(guān)閉按鈕）右側(cè)定位就會(huì)有問(wèn)題，解決方法就是定義一個(gè)非常寬的寬度，就像上面facebook截圖中的CSS屬性一樣，所以，考慮到各種情況，更健壯耐用的CSS代碼應(yīng)如下：

或者使用：

這種兩欄的自適應(yīng)布局，不僅不要分別丈量與計(jì)算兩列的寬度，連absolute自適應(yīng)布局的頭像寬度都不需要亮了，可以說(shuō)是更加懶惰，更加直接的好方法。

三、display:table-cell下的等高布局

table表格中的單元格最大的特點(diǎn)之一就是同一行列表元素都等高。所以，很多時(shí)候，我們需要等高布局的時(shí)候，就可以借助display:table-cell屬性。說(shuō)到table-cell的布局，不得不說(shuō)一下“匿名表格元素創(chuàng)建規(guī)則”：

CSS2.1表格模型中的元素，可能不會(huì)全部包含在除HTML之外的文檔語(yǔ)言中。這時(shí)，那些“丟失”的元素會(huì)被模擬出來(lái)，從而使得表格模型能夠正常工作。所有的表格元素將會(huì)自動(dòng)在自身周圍生成所需的匿名table對(duì)象，使其符合table/inline-table、table-row、table- cell的三層嵌套關(guān)系。

舉個(gè)例子吧，如果我們?yōu)樵厥褂?ldquo;display:table-cell;”屬性，而不將其父容器設(shè)置為“display:table-row;”屬性，瀏覽器會(huì)默認(rèn)創(chuàng)建出一個(gè)表格行，就好像文檔中真的存在一個(gè)被聲明的表格行一樣。如果您還不是很理解，可見(jiàn)參見(jiàn)支付寶UED的“基于display:table的CSS布局”一文。//zxx:支付寶今年的招牌廣告做得很贊的~~

實(shí)現(xiàn)等高布局，毫無(wú)疑問(wèn)，display:table-cell是首選，這就好比鼴鼠，生下來(lái)就是為了打洞用的?？紤]到匿名創(chuàng)建表格元素的問(wèn)題，所有table-cell元素外一定要留有一個(gè)用來(lái)包裹的標(biāo)簽。于是，我們有類似下面的CSS代碼：

結(jié)果在現(xiàn)代瀏覽器下（如下Firefox3.6下截圖）：

對(duì)于不支持display:table-cell屬性的IE6/7瀏覽器，又當(dāng)如何解決呢？
我們可以使用“補(bǔ)差等高法”，就是一個(gè)一個(gè)很大的margin-bottom負(fù)值配上一個(gè)同樣大小的padding-bottom值，本例中為了實(shí)例需要，margin-bottom值就百來(lái)像素。顯然，由于兩者原理不同，難免需要用到hack，所以demo完整CSS代碼如下：

認(rèn)識(shí)display:table-cell屬性的元素對(duì)margin屬性不敏感，所以上面margin-bottom屬性前沒(méi)有加*號(hào)。HTML結(jié)構(gòu)代碼如下：

//zxx:“補(bǔ)差等高法”雖然有效，也有兼容性，但是會(huì)帶來(lái)一些潛在的問(wèn)題，不宜多用。

四、display:table-cell下的列表布局

這里的列表布局專指橫向repeat的布局，就像下圖所示的：

一般這類布局都是使用浮動(dòng)的。但是浮動(dòng)布局的不足在于：一是需要清除浮動(dòng)造成影響；二是不支持不定高列表的浮動(dòng)。替代浮動(dòng)布局的方法是有的，如果深究細(xì)節(jié)以及一些思想，方法還不少。其中有一個(gè)方法就是使用display:table-cell。

當(dāng)然，說(shuō)句心里話，將display:table-cell屬性用在列表元素布局上，有點(diǎn)類似于張飛繡衣服，大馬拉小車，優(yōu)勢(shì)并沒(méi)有多大發(fā)揮，但是，畢竟也算浮動(dòng)布局的一個(gè)備用替換方案。我的下一篇文章將會(huì)詳細(xì)講解浮動(dòng)布局的替換方案，其中table-cell方法可以說(shuō)是里面最不好的一個(gè)方法，本著過(guò)渡和熱身的目的，這里只簡(jiǎn)單講過(guò)。

可以看到即使模塊高度不一致，也不會(huì)產(chǎn)生浮動(dòng)布局可能產(chǎn)生的錯(cuò)位。
由于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訂婚的傳聞那樣讓人震驚。

好，點(diǎn)到為止，就說(shuō)這些。我的下一篇文章還會(huì)講到此屬性的布局的。

五、結(jié)語(yǔ)

對(duì)于display:table-cell，我自己其實(shí)用的并不多，畢竟其特殊之處就在于垂直居中，等高，水平級(jí)聯(lián)，匿名創(chuàng)建等特性，其他種種屬性可以使用其他更好的display屬性代替的。但是話說(shuō)回來(lái)，不太使用display:table-cell屬性的真正的原因可能是對(duì)該屬性的了解的還不夠深入，可能該屬性本身是存在很多非常實(shí)用的應(yīng)用，但是自己由于掌握不夠而不知道。所以，要是哪位同行知道display:table-cell其他一些不錯(cuò)的應(yīng)用的話，歡迎大力補(bǔ)充，不甚感謝！

最后，時(shí)間倉(cāng)促，資質(zhì)有限，文中要是有表述不準(zhǔn)確的地方還望見(jiàn)諒，歡迎嚴(yán)厲地指正。

最新評(píng)論