CSS中table-cell屬性的使用方法

小編給大家分享一下CSS中table-cell屬性的使用方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

我們先來介紹一下table-cell屬性的基本概念

table-cell是display屬性的值，可以給出類似于table標(biāo)記的子元素的樣式。

但我認(rèn)為它看起來像“元素可以輕松并排排列”。

最初“表格”的這一部分，就有一個表格標(biāo)簽。所謂的Web網(wǎng)站開始普及的時候，框架基本上是用table標(biāo)簽進(jìn)行的。

由于HTML標(biāo)簽本身是強(qiáng)制性地表現(xiàn)出來的，所以不可能像“顯示寬度的不同，縱向排列”那樣，現(xiàn)在它已經(jīng)完全看不到與網(wǎng)絡(luò)的響應(yīng)。

因為HTML標(biāo)簽本身被迫看起來像一張桌子，所以“像根據(jù)顯示寬度劃船一樣”是不可能的，現(xiàn)在它已經(jīng)完全看不到與網(wǎng)絡(luò)的響應(yīng)是的。

關(guān)于“表格”的“單元格”，在Excel等中聽說過“單元格”嗎？也就是說，display : table - cell；是可以再現(xiàn)表格里面的框架的。

需要注意的是：它的移動方式與普通的塊元素不同。

table-cell屬性的使用方法

基本上，都是在父元素上使用display：table;然后使用table-cell

下面來看一個實例

HTML

<p>apple</p> 
  </div> 
  <div class ="box orange"> 
    <p> oranges </p> 
  </div> 
  <div class ="box apple">
  <div class ="box grape"> 
    <p>grape</p> 
  </div> 
</div>

CSS

.container{
  display: table;
  width: 600px;
  height: 200px;
}
.box{
  display: table-cell;
  text-align: center;
  color: #fff;
}
.apple{
  background: #ED3B2B;
  vertical-align: middle;
}
.orange{
  background: #E4642C;
  vertical-align: top;
}
.grape{
  background: #9D2AC0;
  vertical-align: bottom;
}

看完了這篇文章，相信你對CSS中table-cell屬性的使用方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！