CSS進階（20）—— 詳解display:none和visibility: hidden的區別

本章的主要內容是利用CSS控制元素的「顯隱」，說道顯隱，以前其實已經提供了一些很是規的CSS方法，如clip，z-index，opacity等，本章咱們來深刻探究一下display:none和visibility: hidden折兩個屬性。

1.display與元素的顯隱

對於一個display計算值是none的元素而言，該元素及其後代元素所有都被隱藏（請記住這個概念，等下對比下visibility的說法）。你能夠認爲當前元素從dom文檔流中「消失了」，固然不是真正的消失，這個節點依舊存在於文檔流中，所以vue中的v-show對應的是CSS的display值，而v-if則是完全刪除節點，跑的有點偏，迴歸正題。當一個元素被設置爲display:none的時候，該元素沒法被點擊，同時佔據的空間消失。通常狀況下，是這樣，但這裏須要排除一種特殊狀況，以下：

<form>
    <input id="hide" type="submit" style="display:none"/>
    <label for="hide">點擊觸發提交</label>
</form>
複製代碼

在本例中，表單元素確實沒法被點擊，但因爲label綁定了id爲「hide」的元素，所以點擊label標籤依舊能夠觸發click事件，因此說沒法被點擊的說法是沒問題的，但該元素的點擊事件依舊被保留，而且能夠經過其餘手段觸發。

display:none顯隱控制並不會影響CSS3 animation動畫的實現，但會影響transition的過渡動畫效果，所以若是要用到transition的話，建議使用visibility。

除了動畫效果外，display：none還會影響CSS的計數隊列。舉個例子，10個列表從1開始計數，當第二個列表的display置爲none，就會致使計數器忽略當前元素，原來的第三個列表則計數爲2。

2.visibility與元素的顯隱

提及visibility屬性，不少人簡單的認爲display:none和visibility:hidden兩個隱藏的區別就在於display:none隱藏後的元素不佔據任何空間，而visibility:hidden隱藏的元素空間依舊保留。這也是咱們一般意義上區分二者並能產生實際做用的關鍵點。除了保留隱藏空間，visibility還有許多有意思的屬性，甚至跟display徹底不同的點，下面咱們來一塊兒捋一捋。

首先visibility和display最大的區別點在於，父元素設置了visibility：hidden後，子元素也隱藏的深層緣由在於子元素會繼承父元素的visibility:hidden，所以，當咱們須要隱藏父元素而又要顯示部分子元素的時候，只須要把子元素繼承的visibility改爲默認的visible屬性便可，這一點在被設置了display:none的元素上，根本不可能實現。咱們來經過一個例子，驗證一下上面的理論

```html

list1

list2

list3

list4

驗證visibility自己佔據空間

```

visibility的元素的子元素只是單純的繼承了父元素的visibility，所以在CSS計數方面不會有任何影響，這點和display:none也有所不一樣。同時transition過渡是支持visibility屬性的，所以在使用過渡動畫的時候，想讓元素實現淡入淡出效果來控制顯隱的可使用visibility:hidden。

本章內容跳過了原著第九章關於color和background的部分，下一章爲包含了原著一些我的認爲雜七雜八的屬性，包含跳過的部分，有興趣的能夠點個關注。

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。