<pre>
[圖片上傳失敗...(image-2969e4-1516190383083)]
頁面布局是HTML+CSS的一個重點(diǎn)，除了常見的幾種布局外沟于，如：float咳胃、position： absolute等等；還有一些功能強(qiáng)大且好用的布局方式旷太，本文就display：table-cell做學(xué)習(xí)總結(jié)展懈。
display:table-cell指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，使元素類似于td標(biāo)簽供璧。IE8+及現(xiàn)代版本的瀏覽器都支持此屬性存崖，IE6/7不支持（可用其他方法實(shí)現(xiàn)類似效果）。同樣嗜傅，display：table-cell屬性也會被float金句，position：absolute等屬性破壞效果檩赢，應(yīng)避免同時使用吕嘀。
設(shè)置了display：table-cell的元素：
對寬度高度敏感
對margin值無反應(yīng)
響應(yīng)padding屬性
內(nèi)容溢出時會自動撐開父元素
display：table-cell的幾種用法
1.大小不固定元素的垂直居中
[圖片上傳失敗...(image-c2b2d6-1516190383083)]
HTML代碼：
<div class="content">
<div style="padding: 50px 40px;background: #cccccc;color: #fff;"></div>
<div style="padding: 60px 40px;background: #639146;color: #fff;"></div>
<div style="padding: 70px 40px;background: #2B82EE;color: #fff;"></div>
<div style="padding: 80px 40px;background: #F57900;color: #fff;"></div>
<div style="padding: 90px 40px;background: #BC1D49;color: #fff;"></div>
</div>
CSS代碼：
.content {
display: table-cell;
padding: 10px;
border: 2px solid #999;
}
.content div {
display: inline-block;
vertical-align: middle;
}
display：table-cell 加上 vertical-align：middle 使高度不同的元素都垂直居中，其中div的display：inline-block使幾個div在同一行顯示贞瞒。
2.兩列自適應(yīng)布局
HTML代碼：
<div class="content">
<div class="left-box">
<img src="img/a1.jpg" width="70">
</div>
<div class="right-box">...</div>
</div>
CSS代碼：
.content {
display: table;
padding: 10px;
border: 2px solid #999;
}
.left-box {
float: left;
margin-right: 10px;
}
.right-box {
display: table-cell;
padding: 10px;
width: 3000px;
vertical-align: top;
border: 1px solid #ccc;
}
左邊頭像部分使用了float左浮動屬性偶房，左側(cè)使用 display: table-cell則實(shí)現(xiàn)了兩列自適應(yīng)布局。至于.right-box中的width：3000px解釋引用別人的：
display:table-cell 元素生成的匿名table默認(rèn)table-layout:auto军浆。寬度將基于單元格內(nèi)容自動調(diào)整棕洋。當(dāng)內(nèi)容足夠多將寬度完全撐開時，再讓某個元素（例如關(guān)閉按鈕）右側(cè)定位就會有問題乒融。所以設(shè)置width:3000px的用途是盡可能的寬的意思。
對于IE6/7赞季，我們可以使用display： inline-block屬性代替申钩。
3.等高布局
[圖片上傳失敗...(image-172428-1516190383083)]
HTML代碼:
<div class="content">
<div class="box1">我和右邊等高</div>
<div class="box2">table表格中的單元格最大的特點(diǎn)之一就是同一行列表元素都等高次绘。所以，很多時候，我們需要等高布局的時候邮偎，就可以借助display:table-cell屬性管跺。說到table-cell的布局，不得不說一下“匿名表格元素創(chuàng)建規(guī)則”</div>
</div>
CSS代碼：
.content {
display: table;
padding: 10px;
border: 2px solid #999;
}
.box1 {
display: table-cell;
width: 100px;
border: 1px solid #ccc;
}
.box2 {
display: table-cell;
border: 1px solid #ccc;
}
4.和inline-block組合使用
[圖片上傳失敗...(image-c0992-1516190383083)]
HTML代碼：
<div class="content">
<div class="left">
<div class="box">A</div>
</div>
<div class="right">
<div class="box">B</div>
</div
</div>
CSS代碼：
.content {
display: table;
padding: 10px;
margin: 10px auto;
width: 1000px;
border: 2px solid #999;
}
.left {
display: table-cell;
text-align: left;
border: 1px solid #0cf;
}
.right {
display: table-cell;
text-align: right;
border: 1px solid #fc0;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
代碼解釋：A和B的父元素均設(shè)置了display：table-cell屬性禾进，所以
它們均勻占據(jù)設(shè)置了display：table的div元素豁跑。而A和B元素設(shè)置display：inline-block是為了讓它們相應(yīng)text-align的屬性設(shè)置。
inline-block 是寬高margin設(shè)定有效泻云，參與行內(nèi)格式化上下文贩绕，在行內(nèi)對齊時使用它自己的框底邊為基線對齊位置
5.列表布局
[圖片上傳失敗...(image-e17fb9-1516190383083)]
HTML代碼：
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
CSS代碼：
.content {
padding: 10px;
margin: 10px auto;
border: 2px solid #999;
}
.content ul {
display: table;
width: 100%;
padding: 0;
}
.content ul li {
display: table-cell;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #ccc;
}
這類布局常用浮動布局（給每個li加上float：left屬性）實(shí)現(xiàn)，但這樣做有明顯不足：
需要清除浮動
不支持不定高列表的浮動
display：table-cell可以代替浮動布局壶愤，但是其不是最好的方法淑倾。其他方法有待進(jìn)一步學(xué)習(xí)！
最后征椒，說說“匿名表格元素創(chuàng)建規(guī)則”娇哆。
CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中勃救。這時碍讨，那些“丟失”的元素會被模擬出來，從而使得表格模型能夠正常工作蒙秒。所有的表格元素將會自動在自身周圍生成所需的匿名table對象勃黍，使其符合table/inline-table、table-row晕讲、table- cell的三層嵌套關(guān)系覆获。
簡單來講，我們?yōu)橐粋€元素設(shè)置了display：table-cell屬性瓢省，而不將其父元素設(shè)置為display：table-row屬性弄息，瀏覽器會默認(rèn)創(chuàng)建一個表格行∏诨椋可參考支付寶UED的
參考：
CSS深入研究:display的恐怖故事解密(2) - table-cell
我所知道的幾種display:table-cell的應(yīng)用
雖然很多部分都是直接借鑒張鑫旭-鑫空間-鑫生活的內(nèi)容，但都是自己親自實(shí)現(xiàn)了一遍的馒胆，僅用于學(xué)習(xí)缨称。
作者：即將離
鏈接：http://www.reibang.com/p/700ede25d0bc
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)祝迂，非商業(yè)轉(zhuǎn)載請注明出處睦尽。</pre>
