1.同行等高。
2.寬度自動調節。
那麼table-cell是不是具備這個特點呢？答案是yes，為什麼呢？css中有乙個有意思的規則「建立匿名**元素」。拿table-cell來扯，就是，當某個元素被設定為display:table-cell的時候，如果她的父節點不是display：table-row，爺爺節點不是display:table，那麼下面就是見證奇蹟的時候，這個兒子生出了他的爸爸和爺爺（瀏覽器會自動建立者兩個匿名盒物件）雖然你找不到你的father 和 grandfather，但這確實發生了，這真的是不可思議的事情，**不可思議，沒有掌聲最不可思議。^_^
那麼下面來看幾種情況，幫助我們了解這個不可思議的事情。我先編寫**如下：
css code複製內容到剪貼簿
然後，我**瀏覽程式設計客棧器顯示如下：
好吧，我承認我先看了效果，然後就可以下結論了：tom 和 jack 搞基，生出了父親和爺爺（瀏覽器會建立乙個**來包裹相鄰的display:table-cell元素），表現和第乙個**相同。angel自己生出了父親和爺爺表現和第二個**相同。
既然是這樣，那麼想了解table-cell，就是變相了解**的td了。那就回到了前面所說的兩個特點：同行等高，寬度自動調節。
既然是這樣，那麼我們就可以拿這個貨來作等高布局：
css code複製內容到剪貼簿
利用列寬度自動調節這個特點可以作左固定右自適應布局：
css code複製內容到剪貼簿
把這貨和vertical-align：middle搞在一起可以進行大小不固定元素的垂直居中布局（還有多行文字垂直居中）：
css code複製內容到剪貼簿
利用列寬度自動調節這個特點可以作左固定右自適應布局：
css code複製內容到剪貼簿
有童鞋可能會對這個布局中的width:3000px感到迷惑。那麼下面就貼上這個布局的原理：
display:table-cell 元素生成的匿名table預設table-layout:auto。寬度將基於單元格內容自動調整。所以設定width:3000px的用途是盡可能的寬的意思。這樣就可以達到自適應的效果。
本文標題: css中的table-cell屬性使用例項教程
本文位址: /web/css/84760.html
關於css中的align content屬性詳解
align content 作用 會設定自由盒內部各個專案在垂直方向排列方式。條件 必須對父元素設定自由盒屬性display flex 並且設定排列方式為橫向排列flex direction row 並且設定換行，flex wrap wrap 這樣這個屬性的設定才會起作用。設定物件 這個屬性是對她容...
CSS3中的變形處理 transform 屬性
在css3中，可以利用transform功能來實現文字或影象的旋轉 扭曲 縮放 位移 矩陣 原點 這六種型別的變形處理，下面將詳細講解transform的使用。變形 旋轉 rotate div.box 順時針旋轉45度 變形 扭曲 skew div.box 通過skew 函式將長方形變成平行四邊形。...
CSS中的盒子模型與 box sizing 屬性
盒子模型是css中乙個重要的概念，是開發網頁必須要用的布局方法。盒子模型有兩種，分別是標準 w3c 盒子模型和 ie 盒子模型。標準 w3c盒子模型 包括 magin 外邊距 border 邊框 padding 內邊距 content 內容 並且 content 部分不包含其他部分。也就是說給該元素...