CSS2中display:table屬性的用法詳解

           想必大家都已經知道了css屬性display的一些常見屬性值,比如none,block,inline-block等等,今日我在看一個效果代碼的時候,碰到一個之前從未使用過的屬性值,就是它了,display:table。隨後從網上以及手冊中搜索了一下它的具體用法,在此總結下來分享給大家,希望能對大家有所幫助~

           我們都知道table是已經被W3C不再提倡使用的表格佈局,所以大家可能猜到了,display:table就是與表格相關的顯示方式,display的所有屬性:

      

描述
none 此元素不會被顯示。
block 此元素將顯示爲塊級元素,此元素前後會帶有換行符。
inline 默認。此元素會被顯示爲內聯元素,元素前後沒有換行符。
inline-block 行內塊元素。(CSS2.1 新增的值)
list-item 此元素會作爲列表顯示。
run-in 此元素會根據上下文作爲塊級元素或內聯元素顯示。
compact CSS 中有值 compact,不過由於缺乏廣泛支持,已經從 CSS2.1 中刪除。
marker CSS 中有值 marker,不過由於缺乏廣泛支持,已經從 CSS2.1 中刪除。
table 此元素會作爲塊級表格來顯示(類似 <table>),表格前後帶有換行符。
inline-table 此元素會作爲內聯表格來顯示(類似 <table>),表格前後沒有換行符。
table-row-group 此元素會作爲一個或多個行的分組來顯示(類似 <tbody>)。
table-header-group 此元素會作爲一個或多個行的分組來顯示(類似 <thead>)。
table-footer-group 此元素會作爲一個或多個行的分組來顯示(類似 <tfoot>)。
table-row 此元素會作爲一個表格行顯示(類似 <tr>)。
table-column-group 此元素會作爲一個或多個列的分組來顯示(類似 <colgroup>)。
table-column 此元素會作爲一個單元格列顯示(類似 <col>)
table-cell 此元素會作爲一個表格單元格顯示(類似 <td> 和 <th>)
table-caption 此元素會作爲一個表格標題顯示(類似 <caption>)
inherit 規定應該從父元素繼承 display 屬性的值。

使用CSS表格

       CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如,“display:table;”的CSS聲明能夠讓一個HTML元素和它的子節點像table元素那樣具有表格的特性。使用基於表格的CSS佈局,使我們能夠輕鬆定義一個單元格的邊界、背景等樣式,而不會產生因爲使用了table那樣的製表標籤所導致的語義化問題。

兼容性

       該屬性在IE8以上以及Firefox,Chrome,Safari等瀏覽器上均可以支持,因爲它本身也是個CSS2的屬性。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章