小編給大家分享一下CSS中table-cell屬性的使用方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯公司網站建設公司是一家服務多年做網站建設策劃設計制作的公司,為廣大用戶提供了做網站、成都做網站,成都網站設計,廣告投放,成都做網站選創(chuàng)新互聯公司,貼合企業(yè)需求,高性價比,滿足客戶不同層次的需求一站式服務歡迎致電。
我們先來介紹一下table-cell屬性的基本概念
table-cell是display屬性的值,可以給出類似于table標記的子元素的樣式。
但我認為它看起來像“元素可以輕松并排排列”。
最初“表格”的這一部分,就有一個表格標簽。所謂的Web網站開始普及的時候,框架基本上是用table標簽進行的。
由于HTML標簽本身是強制性地表現出來的,所以不可能像“顯示寬度的不同,縱向排列”那樣,現在它已經完全看不到與網絡的響應。
因為HTML標簽本身被迫看起來像一張桌子,所以“像根據顯示寬度劃船一樣”是不可能的,現在它已經完全看不到與網絡的響應是的。
關于“表格”的“單元格”,在Excel等中聽說過“單元格”嗎?也就是說,display : table - cell;是可以再現表格里面的框架的。
需要注意的是:它的移動方式與普通的塊元素不同。
table-cell屬性的使用方法
基本上,都是在父元素上使用display:table;然后使用table-cell
下面來看一個實例
HTML
apple
oranges
grape
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屬性的使用方法有了一定的了解,想了解更多相關知識,歡迎關注創(chuàng)新互聯行業(yè)資訊頻道,感謝各位的閱讀!