css display屬性及使用方法

2021-09-29 22:32:40 字數 2698 閱讀 9400

ie

firefox

chrome

safari

opera

支援支援

支援支援

支援所有主流瀏覽器都支援 display 屬性。

注釋:如果規定了 !doctype,則 internet explorer 8 (以及更高版本)支援屬性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

display 屬性規定元素應該生成的框的型別。

這個屬性用於定義建立布局時元素生成的顯示框型別。對於 html 等文件型別,如果使用 display 不謹慎會很危險,因為可能違反 html 中已經定義的顯示層次結構。對於 xml,由於 xml 沒有內建的這種層次結構,所有 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 屬性的值。

2.基本屬性

none是 css 1 就提出來的屬性,將元素設定為none的時候既不會佔據空間,也無法顯示,相當於該元素不存在。

該屬性可以用來改善重排與重繪,同時我也經常用它來做模態窗等效果。

inline也是 css 1 提出的屬性,它主要用來設定行內元素屬性,設定了該屬性之後設定高度、寬度都無效,同時text-align屬性設定也無效,但是設定了line-height會讓inline元素居中(可以把塊元素轉化成行元素)

設定元素為塊狀元素,如果不指定寬高,缺省會繼承父元素的寬度,並且獨佔一行,即使寬度有剩餘也會獨佔一行,高度一般以子元素撐開的高度為準,當然也可以自己設定寬度和高度。(可以把行元素轉化成塊元素)

此屬性缺省會把元素作為列表顯示,要完全模仿列表的話還需要加上list-style-position,list-style-type

inline-block為 css 2.1 新增的屬性。inline-block既具有block的寬高特性又具有inline的同行元素特性。 通過inline-block結合text-align: justify還可以實現固定寬高的列表兩端對齊布局(可以把塊元素設定為行內塊元素)

table此元素會作為塊級**來顯示(類似table),**前後帶有換行符。css**能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如,display:table的css宣告能夠讓乙個html元素和它的子節點像table元素一樣。使用基於**的css布局,使我們能夠輕鬆定義乙個單元格的邊界、背景等樣式, 而不會產生因為使用了table那樣的製表標籤所導致的語義化問題。

我在mdn上面看到有這個屬性,但是我實際嘗試發現這個屬性是不能使用的,在  上面也沒有找到這個元素的相容性,所以應該是不能使用的,支援度全無

flex是一種彈性布局屬性

注意,設為flex布局以後,子元素的float、clearvertical-align屬性將失效。

主要屬性有兩大類:容器屬性和專案的屬性

容器屬性

專案屬性

css display屬性詳解

css display屬性用於指定在頁面上使用哪種盒模型來渲染指定的元素。通俗來講就是某個元素在頁面中的顯示方式 inline table,table,table row group,table column,table column group,table header group,table f...

css display屬性辨析

經常看到這樣的屬性,block inline 也用的比較多,但是什麼讓它們產生的差異,並沒有深究過,inline block 不太明白怎麼回事,今天做乙個小結。block inline就不多說,乙個塊兒級,乙個行級,inline block則是對外表現是行級,包含的元素則表現塊兒級屬性。具體看下邊解...

Css display的幾個屬性

塊級元素 block 特性 總是獨佔一行,表現為另起一行開始,而且其後的元素也必須另起一行顯示 寬度 width 高度 height 內邊距 padding 和外邊距 margin 都可控制 內聯元素 inline 特性 和相鄰的內聯元素在同一行 寬度 width 高度 height 內邊距的top...