CSS Display Property: 控制HTML元素的顯示與隱藏

一、CSS Display屬性的介紹

CSS Display屬性是用來控制HTML元素在頁面上的顯示與隱藏，是所有CSS屬性中最常使用的屬性之一。當我們設置一個元素的CSS Display屬性為none，那麼這個元素就會在頁面上消失，當我們將其設置為block、inline、inline-block等屬性時，該元素就會出現在頁面上。下面我們將會對Display屬性的常見取值進行介紹。

二、CSS Display屬性的取值及其介紹

1、block

/*HTML*/

<div id="block-example">
    <p>這是一個例子</p>
</div>

/*CSS*/

#block-example{
    display:block;
    width:100px;
    height:50px;
    background-color:red;
}

block表示將整個元素顯示成塊級元素，塊級元素會獨佔一行，並且會在前後添加 \
標籤。我們通過上面的代碼可以看到，設置了display:block屬性的div元素，會顯示成一個寬度為100px、高度為50px的紅色框。

2、inline

/*HTML*/

<span id="inline-example">這是一個例子</span>

/*CSS*/

#inline-example{
    display:inline;
    background-color:red;
}

inline表示將元素顯示成行內元素，行內元素不會在前後添加 \
標籤，而是排在一行內，直到一行排不下才會自動換行。我們通過上面的代碼可以看到，將display屬性設置為inline的span元素會顯示成一個紅色的文字，而且不會獨佔一行。

3、inline-block

/*HTML*/

<div id="inline-block-example">
    <p>這是一個例子</p>
</div>

/*CSS*/

#inline-block-example{
    display:inline-block;
    width:100px;
    height:50px;
    background-color:red;
}

inline-block結合了上面兩種屬性的特點，既可以像inline一樣排在一行內，也可以像block一樣設置寬高等屬性。我們通過上面的代碼可以看到，將display屬性設置為inline-block的div元素會顯示成一個寬度為100px、高度為50px的紅色框，並且不會獨佔一行。

4、none

/*HTML*/

<div id="none-example">
    <p>這是一個例子</p>
</div>

/*CSS*/

#none-example{
    display:none;
    width:100px;
    height:50px;
    background-color:red;
}

none表示讓元素在頁面中消失不見，與visibility:hidden屬性不同的是，使用display:none屬性的元素不僅不會顯示，也不會佔據頁面中的空間。我們通過上面的代碼可以看到，設置了display:none屬性的div元素不會在頁面中顯示，就算設置了寬高和背景顏色也沒有用。

三、使用CSS Display屬性的注意事項

1、inline元素和inline-block元素的間距問題

我們在頁面上經常會將多個行內元素或行內塊級元素排在一起，但是如果不做特定的設置，它們之間會存在一定的間距，給布局造成一定的影響。這是因為在HTML文檔中，多個行內元素排列在一起時，它們之間會有一個空格，這個空格會被解析成一個字元，所以頁面上它們之間就會有一定的間距。解決這個問題可以使用以下兩種方式：

/*方法1：去除空格*/

<div id="inline-example1"><p>這是一個例子1</p></div><div id="inline-example2"><p>這是一個例子2</p></div>

#inline-example1,#inline-example2{
    display:inline-block;
}

/*方法2：設置font-size：0*/

<div id="inline-example1"><p>這是一個例子1</p></div><div id="inline-example2"><p>這是一個例子2</p></div>

#inline-example1,#inline-example2{
    display:inline-block;
    font-size:0;
}

#inline-example1 p,#inline-example2 p{
    font-size:16px;
}

第一種方式比較簡單，就是將多個inline元素挨著放，不要在它們之間添加空格。第二種方式是將其父元素的字體大小設置為0，然後在內部的元素恢復正常字體大小。

2、使用none屬性可以實現元素的延遲載入

CSS Display屬性的一個比較巧妙的應用是實現頁面的延遲載入。在頁面中，我們可以先將某些元素的Display屬性設置為none，這樣頁面不會立即載入這部分內容，直到用戶觸發某些事件（例如點擊某個按鈕），我們再將這部分內容的Display屬性設置為block，實現延遲載入的效果。這種方式可以有效減輕頁面的載入壓力，提高用戶的體驗效果。

3、不要濫用none屬性

雖然使用CSS Display屬性的none取值可以方便地隱藏/顯示某些元素，但是不要濫用它。例如，如果我們需要暫時隱藏某個元素，不要將其Display屬性設置為none，可以將其封裝到一個父元素內部，然後將這個父元素的Display屬性設置為none。這樣做的好處是我們後續需要顯示這個元素時，不用重新設定其寬高等屬性，可以提高Web頁面的運行效率，優化用戶體驗。