css display屬性詳解

2021-07-13 15:53:12 字數 514 閱讀 9029

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

inline-table, table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption:這些值會將元素顯示為**。inline-table不是乙個在html中直接對映的元素,它的行為和html元素相同,但是它是乙個內聯元素,而不是乙個塊級元素。

flex:元素顯示為塊級元素,它的內容根據flexbox模式來進行布局。

inline-flex:元素顯示為內聯元素,它的內容根據flexbox模式來進行布局。

grid:元素顯示為塊級元素,它的內容根據grid模式來進行布局。

inline-grid:元素顯示為內聯元素,它的內容根據grid模式來進行布局。

css display屬性辨析

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

Css display的幾個屬性

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

前端 CSS display常見屬性

此元素不會被顯示。隱藏該區域,不佔實際空間。但對後台來說真實存在,可以獲取被隱藏的元素。visibility hidden 將元素隱藏,但是在網頁中該佔的位置還是佔著。網頁佔位 display none 將元素的顯示設為無,即在網頁中不佔任何的位置。網頁不佔位 flex是一種彈性布局屬性。注意,設f...