參考資料：https://www.bilibili.com/video/BV18J411S7tZ?p=5
一、display屬性概述
根據CSS規范的規定，每一個網頁元素都有一個display屬性，用於確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它的默認display屬性值為“block" ，稱為塊元素，而span元素的默認display屬性值為“inline”，稱為行內元素。
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元素的空間。