參考blog:https://blog.csdn.net/qq_38128179/article/details/80794397
- 使用css讓元素不可見的方法有很多種,裁剪、定位到螢幕外邊、透明度變換等都是可以的。但是最常用兩種方式就是設定元素樣式為display: none或者visibility: hidden。很多公司的面試官也常常會問面試者這兩者之間的差別。
1、display與元素的隐藏
如果給一個元素設定了display: none,那麼該元素以及它的所有後代元素都會隐藏,它是前端開發人員使用頻率最高的一種隐藏方式。隐藏後的元素無法點選,無法使用螢幕閱讀器等輔助裝置通路,占據的空間消失。
<body>
<div>
<strong>給元素設定display:none樣式</strong>
<p>A元素</p>
<p style='display:none;'>B元素</p>
<p>C元素</p>
</div>
</body>
效果圖:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL4lFRPJTUE9EeRpHW4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL2ADO0UDNzYTM2EzMwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
2、visibility與元素的隐藏
給元素設定visibility: hidden也可以隐藏這個元素,但是隐藏元素仍需占用與未隐藏時一樣的空間,也就是說雖然元素不可見了,但是仍然會影響頁面布局。
<body>
<div>
<strong>給元素設定visibility:hidden樣式</strong>
<p>A元素</p>
<p style='visibility:hidden;'>B元素</p>
<p>C元素</p>
</div>
</body>
效果圖:
3、display: none與visibility: hidden的差別
很多前端的同學認為visibility: hidden和display: none的差別僅僅在于display: none隐藏後的元素不占據任何空間,而visibility: hidden隐藏後的元素空間依舊保留 ,實際上沒那麼簡單,visibility是一個非常有故事性的屬性
1、visibility具有繼承性,給父元素設定visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設定visibility: visible,則子元素又會顯示出來。這個和display: none有着質的差別
2、visibility: hidden 不會影響計數器的計數 ,如圖所示,visibility: hidden雖然讓一個元素不見了,但是其計數器仍在運作。這和display: none完全不一樣
<body>
<div>
<strong>給元素設定visibility:hidden樣式</strong>
<ol>
<li>元素1</li>
<li style="visibility:hidden;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
<div>
<strong>給元素設定display:none樣式</strong>
<ol>
<li>元素1</li>
<li style="display:none;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
</body>
效果圖:
3、CSS3的 transition 支援
visibility
屬性,但是并不支援display,由于transition可以延遲執行,是以可以配合visibility使用純css實作hover延時顯示效果。提高使用者體驗。