CSS中的display屬性是非常重要的一個屬性,其作用是定義元素的顯示方式。
元素 { display: 屬性值; }
其中屬性值包括:
- block:元素將以塊級元素的形式進行顯示,即獨占一行,并且寬度默認為100%。通常用于布局中的容器元素,比如div。
- inline:元素將以行內元素的形式進行顯示,即可以和其他行內元素在一行內并排顯示,寬度默認為其內容的寬度。通常用于文字、圖片等的顯示。
- inline-block:元素將以行內塊級元素的形式進行顯示,即可以和其他行內元素在一行內并排顯示,但可以設置寬度、高度等塊級元素的屬性。
- none:元素將不會顯示,即不占據頁面空間。常用于通過JS控制元素的顯示和隱藏。
除了上述四個屬性值以外,還有一些比較特殊的值:
- table:將元素以表格的形式進行顯示,支持類似表格的結構和樣式。
- inline-table:將元素以行內表格的形式進行顯示,支持類似表格的結構和樣式,但不會獨占一行。
- flex:將元素以彈性盒模型的形式進行顯示,可設置伸縮、對齊等屬性,適用于響應式布局。
- inline-flex:將元素以行內彈性盒模型的形式進行顯示,可設置伸縮、對齊等屬性,但不會獨占一行。
使用display屬性還有一個常見的應用——隱藏一個元素:
元素 { display: none; }
但需要注意的是,這并不是真正意義上的刪除元素,而是將其在頁面中隱藏,一些屬性和事件等還是會存在。若希望徹底刪除元素,可以使用JS中的remove()方法。
上一篇ejs與vue
下一篇CSS中float和d