CSS2中display table屬性的用法詳解

2021-06-27 19:59:14 字數 1506 閱讀 8535

想必大家都已經知道了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

此元素會作為塊級**來顯示(類似 ),**前後帶有換行符。

inline-table

此元素會作為內聯**來顯示(類似 ),**前後沒有換行符。

table-row-group

此元素會作為乙個或多個行的分組來顯示(類似 )。

table-header-group

此元素會作為乙個或多個行的分組來顯示(類似 )。

table-footer-group

此元素會作為乙個或多個行的分組來顯示(類似 )。

table-row

此元素會作為乙個**行顯示(類似 )。

table-column-group

此元素會作為乙個或多個列的分組來顯示(類似 )。

table-column

此元素會作為乙個單元格列顯示(類似 )

table-cell

此元素會作為乙個**單元格顯示(類似 和 )

table-caption

此元素會作為乙個**標題顯示(類似 )

inherit

規定應該從父元素繼承 display 屬性的值。

使用css**

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

相容性

該屬性在ie8以上以及firefox,chrome,safari等瀏覽器上均可以支援,因為它本身也是個css2的屬性。

CSS 2 理解CSS浮動

一 概述 1.為什麼需要使用浮動 在標準流中,所有的塊級元素都獨佔一行。為了讓多個塊級元素可以在同一行上顯示,需要使用浮動或定位 2.語法 float none left right 3.浮動的特點 1 讓元素脫離標準流,漂浮在標準流之上。半脫標 注意 浮動元素並沒有脫離標準流中的文字流,即標準流中...

CSS2學習筆札

一 樣式 1 背景 2 文字 3 超銜接 4 列表 5 6 輪廓ie不支援 二 盒模型 一旦為頁面設定了恰當的 dtd,大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範,元素內容佔據的空間是由 width 屬性設定的,而內容周圍的 paddi...

CSS2基本語法

選擇器 用於找到html標籤,對應給樣式。屬性 屬性名和屬性值組成的 屬性名和值用 隔開 多個屬性之間用 隔開 結構 選擇器 注釋 基本單位 百分比 in 英吋 cm 厘公尺 mm 公釐 em 1em 等於當前的字型尺寸,2em 等於當前字型尺寸的兩倍。ex 乙個 ex 是乙個字型的 x heigh...