前端學習筆記 display的值和作用

2021-10-10 22:44:48 字數 1164 閱讀 9596

display 的屬性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

* none: 元素不會顯示,不佔空間。

* inline:display的預設屬性。將元素顯示為內聯元素,不能設定寬和高。

* block:將元素顯示為塊級元素,預設佔一行,可以設定寬和高。

* inline-block:行內塊元素,這個屬性值融合了inline 和 block 的特性,即是它既是內聯元素,又可以設定寬和高。

* run-in:此元素會根據上下文作為塊級元素或內聯元素顯示。

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

* list-item:此元素會作為列表顯示。

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

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

* table-row-group:此元素會作為乙個或多個行的分組來顯示(類似 )。

* table-header-group:此元素會作為乙個或多個行的分組來顯示(類似 )。

* table-footer-group:此元素會作為乙個或多個行的分組來顯示(類似 )。

* table-column-group:此元素會作為乙個或多個列的分組來顯示(類似 )。

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

* table-column:此元素會作為乙個單元格列顯示(類似 )。

* table-cell:此元素會作為乙個**單元格顯示(類似 和 )。

* table-caption:此元素會作為乙個**標題顯示(類似 )。

* compact	css 中有值 compact,不過由於缺乏廣泛支援,已經從 css2.1 中刪除。

* marker css 中有值 marker,不過由於缺乏廣泛支援,已經從 css2.1 中刪除。

display的值以及作用。

display none 隱藏元素 display none 是徹底地清除元素的物理位置,使其從文件流中消失,而visibility hidden和opacity o保留元素的物理位置隱藏元素 display block 塊級元素 display inline 內聯元素 display inline...

學習筆記 html元素之display

行級元素 與其他元素在同一行上,內容文字或者的寬度不可以改變 對行級元素使用寬高是無效的 height 100px width 200px 左右邊距 margin right margin right有效 上下邊距 margin bottom margin top無效 padding left ri...

display和position的值與作用

常用的值有none inline block inline block 1 表示該元素不會顯示,並且該元素的空間也不存在,可理解為已刪除 2 visibility hidden只是將元素隱藏,但不會改變頁面布局,但也不會觸發該元素已經繫結的事件 3 opacity 0,將元素隱藏,不會改變頁面布局,...