CSS學習筆記:display屬性
參考資料:https://www.bilibili.com/video/BV18J411S7tZ?p=5
一、display屬性概述
根據CSS規範的規定,每一個網頁元素都有一個display屬性,用於確定該元素的型別,每一個元素都有預設的display屬性值,比如div元素,它的預設display屬性值為“block" ,稱為塊元素
1. 塊級元素和行內元素的區別
兩種元素的最大區別在於塊級元素是獨佔一行的,例如排列兩個div,那麼後面的div必然排列在第一個div的下面;而行內元素則是可以在同一行裡排列多個。此外塊級元素還可以設定對應的寬高值,而行內元素一般需要裡面的內容來決定元素的具體大小。
2.常見的塊級元素和行內元素
常見的塊級元素和行內元素如下表所示:
元素型別 | html元素 |
---|---|
塊元素 | div、h1~h6、hr、ol、ul、li、p、table、tr |
行內元素 | a、span、br、img、input、label、select、textarea |
3. display屬性常見的屬性值
各屬性值和對應的效果如下所示:
屬性值 | 效果 |
---|---|
none | 隱藏物件,相當於元素被移除,不佔據物理空間 |
inline | 指定物件為行內元素,無法設定寬高,且一行可以放置多個 |
block | 指定物件為塊級元素,可設定寬高,且獨佔一行 |
inline-block | 指定物件為行內塊元素,可設定寬高,且一行可以放置多個 |
table-cell | 指定物件為表格單元格,一行可以放置多個,類似flex佈局 |
flex | 彈性盒 |
二、測試display取各屬性值的效果
1. 測試inline和block
測試程式碼:
<div>塊狀元素</div>
<span>行內元素</span>
div, span {
height: 200px;
width: 200px;
}
div {
background-color: #df637a;
}
span {
background-color: #72d0f6;
}
當前效果:
可以看到,雖然兩個元素都設定了高度和寬度,但只有塊元素div擁有了對應的大小,而span的大小僅有內容決定。
此時我們可以翻轉兩者的屬性,看下操作後的效果:
div {
...
display: inline;
}
span {
...
display: block;
}
可以看到,此時反而是span元素擁有了對應的寬高,而div元素反而變成了行內元素了。因此我們可以通過設定display屬性來設定元素的型別。
2. inline-block屬性值
此時修改div和span都為行內塊,即:
div {
...
display: inline-block;
}
span {
...
display: inline-block;
}
效果:
此時可以發現兩者都擁有了對應的寬高,並且可以在同一行中排列了,即行內塊元素同時擁有了【設定寬高和同行排列】的特性。
3. table-cell屬性值
修改程式碼為:
<div>塊狀元素</div>
<div>塊狀元素</div>
<div>塊狀元素</div>
<div>塊狀元素</div>
<div>塊狀元素</div>
<span>行內元素</span>
div, span {
height: 200px;
width: 200px;
}
div {
background-color: #df637a;
display: table-cell;
}
span {
background-color: #72d0f6;
}
效果如下:
可以發現此時五個div排列在了同一行,而且span元素需要排列在這5個div的下面,因此我們有時也可以通過修改塊狀元素的display屬性為table-cell來實現元素的水平排列。
4. none屬性值
程式碼如下:
<div>塊狀元素</div>
<span>行內元素</span>
div, span {
height: 200px;
width: 200px;
}
div {
background-color: #df637a;
display: none;
}
span {
background-color: #72d0f6;
}
效果:
可以看到div元素被隱藏了,此外它所應該佔據的物理空間也沒有了,這裡可以對比visibility: hidden
:
div {
...
visibility: hidden;
}
可以看到,使用visibility: hidden
也是隱藏元素,但可以理解為元素只是變得透明瞭,它還是在那裡的,因而物理空間也仍然被元素佔據著,因此span元素上有著div元素的空間。