學會就愛不釋手的「布局屬性」- display: table-cell

前言： 前端并非大學課程，相信很多前端小伙伴都是自學成才，也正因為如此，往往涉世面不夠，再加上繁重的工作內容，讓自己沒多少時間去挖掘那些好用的屬性，天天吮吸手上的三兩糖。本文給大家帶來一個非常好用的屬性，進入正題

先露一手： 實現圖片在<div>中水平垂直居中
html結構:

<body>
    <div>
        <img >
    </div>
</body>

css樣式:

*{ margin: 0px;  padding: 0px; }
div {
    width: 150px;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: black;
}
div img {
    width: 50px;
    height: 50px;
}

顯示效果：

圖片居中

理解

display: table-cell 屬性讓元素以表格單元格的形式呈現，使元素類似于td標簽，ie8+以及現在的主流瀏覽器 Chrome、Firefox、Safari 和 Opera 都支持該屬性。值得注意的是，該屬性與 position/float等存在沖突，會破壞其效果，應盡量避免布局屬性的共用。

display: table-cell屬性特點:

  • 同行等高
  • 寬度自動調節

使用了display: table-cell屬性的元素:

  • 對高度敏感
  • 不響應margin，但響應padding； 如果要用margin，可以再包裹一層元素
  • 內容溢出會撐開父元素

使用

1. 不同元素全居中用法

效果展示：

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;
    }

dispaly: table-cell 加上 vertical-align 使得不同高度的元素都垂直居中，其中，div的display: inline-block 使得幾個div顯示在同一行上。

2. 兩列自適應布局

實現效果：

html代碼：

<div class="content">
  <div class="left-box'>![](prettyGirl.png)</div>
  <div class="right-box">
    <p><a href="">大美女一枚</a> 來自上海</p>
    <p>簽名：想找個保鮮盒把你給我的那些感動都裝起來。當你讓我傷心的時候就拿出來回味一下</p>
    <p>微博：坐在辦公室，只聽轟隆隆幾聲巨響，晴天也能打雷嗎？原來街對面的芭莎咖啡廳被炸成了兩截。這定點爆破也太失敗了，也不清下場，把路過的汽車震得灰頭土臉，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是zha藥太水還是房子質量太好？</p>
  </div>
</div>

css代碼

.content {
  display: table-cell;
  padding: 10px;
  border: 2px solid gray;  
}
.left-box {
  float: left;
  margin-right: 10px;
}
.right-box {
  display: table-cell; 
  *display:inline-block;
  padding: 10px; 
  width: 2000px;
  vertical-align: top;
  border: 1px solid #aaa;
}

說明: left-box頭像部分使用左浮動，距離右側10個像素，左側利用display：table-cell實現兩列自適應布局，很簡單的代碼，很神奇的效果。width: 2000px的有關解釋如下：

display:table-cell 元素生成的匿名table默認table-layout:auto。寬度將基于單元格內容自動調整。當內容足夠多將寬度完全撐開時，再讓某個元素（例如關閉按鈕）右側定位就會有問題。當前屏幕居多為1920，設置2000是設置了一個比1920更大的值以有足夠空間自適應屏幕大小拉動

hack先知

匿名表格元素創建規則： ? CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中。這時，那些“丟失”的元素會被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table-cell的三層嵌套關系。

也就是說，我們為一個元素設置了**display：table-cell**屬性，而不將其父元素設置為**display：table-row**屬性，瀏覽器會默認創建一個表格行。可參考支付寶UED的基于display:table的CSS布局一文！

?

3. 等高布局

實現等高布局，毫無疑問，display:table-cell是首選，但是考慮到匿名創建表格元素的問題，所有table-cell元素外一定要留有一個用來包裹的標簽
實現效果：

html代碼：

<div class="content">
  <div class="left-part">我和右邊等高</div>
  <div class="right-part">table表格中的單元格最大的特點之一就是同一行列表元素都等高。所以，很多時候，我們需要等高布局的時候，就可以借助display:table-cell屬性。說到table-cell的布局，不得不說一下“匿名表格元素創建規則”</div>
</div>

css代碼：

.content {
  display: table;
  padding: 10px;
  border: 2px solid #888;
} 
.left-part {
  display: table-cell;
  width: 100px;
  border: 1px solid #bbb;
}
.right-part {
  display: table-cell;
  border: 1px solid #bbb;
}
4. 與inline-block 配合使用


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 元素都設置了display: table-cell，所以它們均勻占據設置了display: tabled的div元素。.box 設置 display 屬性為 inline-block，是為了讓它們響應text-align屬性的設置

dispaly:table-cell不響應margin屬性，但inline-block對寬高margin設定是有效的，參與行內格式化上下文，在行內對齊時使用它自己的框底邊為基線對齊位置

5. 列表布局


html代碼：

 <div class="content">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

css代碼：

* {margin: 0px;  padding: 0px}
.content {
  padding: 10px;
  margin: 10px auto;
  border: 1px solid #888;
}
.content ul {
  display: table;
  width: 100%;
}
.content ul li {
  display: table-cell;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: solid 1px  #ddd;
}

說明： ? 這種情況一般使用float來解決，給每一個 li 增加 float: left 屬性，但這樣做有明顯的不足：

  • 清除浮動
  • 不支持不定高的列表浮動

先介紹到這里。如果還迷惑，可以參考文獻
我所知道的幾種display:table-cell的應用
參考
布局神器display:table-cell

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容