CSS魔法堂：display:none與visibility:hidden的恩怨情仇

前言

 還記得面試時被問起"請說說display:none和visibility:hidden的區別"嗎？是否是回答完display:none不佔用原來的位置，而visibility:hidden保留原來的位置後，面試官就會心一笑呢？其實不止那麼簡單呢！本文咱們將一塊兒深究它倆的恩怨情仇，下次面試時咱們能夠回答得更出彩！

深刻display:none

 咱們都清楚當元素設置display:none後，界面上將不會顯示該元素，而且該元素不佔佈局空間，但咱們仍然能夠經過JavaScript操做該元素。但爲何會這樣呢？
 這個涉及到瀏覽器的渲染原理：瀏覽器會解析HTML標籤生成DOM Tree，解析CSS生成CSSOM，而後將DOM Tree和CSSOM合成生成Render Tree，元素在Render Tree中對應0或多個盒子，而後瀏覽器以盒子模型的信息佈局和渲染界面。而設置爲display:none的元素則在Render Tree中沒有生成對應的盒子模型，所以後續的佈局、渲染工做天然沒它什麼事了，至於DOM操做仍是能夠的。
 但除了上面的知識點外，還有如下8個點咱們須要注意的
1.原生默認display:none的元素
其實瀏覽器原生元素中有很多自帶display:none的元素，如link,script,style,dialog,input[type=hidden]等.

2.HTML5中新增hidden布爾屬性，讓開發者自定義元素的隱藏性

/* 兼容原生不支持hidden屬性的瀏覽器  */
[hidden]{
  display: none;
}

<span hidden>Hide and Seek: You can't see me!</span>

3.父元素爲display:none，子孫元素也難逃一劫

.hidden{
  display: none;
}
.visible{
  display: block;
}

*** START ***
<div class="hidden">
  I'm parent!
  <div class="visible"> I'm son! </div>
</div>
*** END ***

瀏覽器直接顯示爲

*** START ***
*** END ***

4.沒法獲取焦點
原本無一盒，何處惹焦點呢^_^即便經過tab鍵也是沒辦法的

<!-- 真心不會得到焦點 -->
<input type="hidden">
<div tabindex="1" style="display:none">hidden</div>

5.沒法響應任何事件，不管是捕獲、命中目標和冒泡階段均不能夠
因爲display:none的元素根本不會在界面上渲染，就是連1個像素的都不佔，所以天然沒法經過鼠標點擊命中，而元素也沒法獲取焦點，那麼也不能成爲鍵盤事件的命中目標；而父元素的display爲none時，子元素的display一定爲none，所以元素也沒有機會位於事件捕獲或冒泡階段的路徑路徑上，所以display:none的元素沒法響應事件。

6.不耽誤form表單提交數據
雖然咱們沒法看到display:none的元素，但當表單提交時依然會將隱藏的input元素的值提交上去。

<form>
  <input type="hidden" name="id">
  <input type="text" name="gguid" style="display:none">
</form>

7.CSS中的counter會忽略display:none的元素

.start{
  counter-reset: son 0;
}
.son{
  counter-increment: son 1;
}
.son::before{
  content: counter(son) ". ";
}

<div class="start">
  <div class="son">son1</div>
  <div class="son" style="display:none">son2</div>
  <div class="son">son3</div>
</div>

結果就是：

1. son1
2. son3

8.Transition對display的變化不感冒
詳情請參考CSS魔法堂：Transition就這麼好玩

9.display變化時將觸發reflow
撇開display:none，咱們看看display:block表示元素位於BFC中，而display:inline則表示元素位於IFC中，也就是說display的用於就是設置元素所屬的佈局上下文，若修改display值則表示元素採用的佈局方式已發生變化，不觸發reflow才奇怪呢！

深刻visibility

 visibility有兩個不一樣的做用

1. 用於隱藏表格的行和列
2. 用於在不觸發佈局的狀況下隱藏元素

4個有效值

1.visible
 沒什麼好說的，就是在界面上顯示。
2.hidden
 讓元素在見面上不可視，但保留元素原來佔有的位置。
3.collapse
 用於表格子元素(如tr,tbody,col,colgroup)時效果和display:none同樣，用於其餘元素上時則效果與visibility:hidden同樣。不過因爲各瀏覽器實現效果均有出入，所以通常不會使用這個值。
4.inherit
 繼承父元素的visibility值。

對比清楚display:none和visibility:hidden

 上面咱們已經對display:none列出8點注意事項，那麼咱們僅需對照它逐一列出visibility的不就清晰可見了嗎？
1.父元素爲visibility:hidden，而子元素能夠設置爲visibility:visible而且生效

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
<div class="hidden">
  I'm Parent.
  <div class="visible">
    I'm Son.
  </div>
</div>

結果：

2.和display:none同樣沒法得到焦點

3.可在冒泡階段響應事件
因爲設置爲visibility:hidden的元素其子元素能夠爲visibility:visible，所以隱藏的元素有可能位於事件冒泡的路徑上所以下面代碼中，將鼠標移至.visible時，.hidden會響應hover事件顯示。

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.hidden:hover{
  visibility: visible;
}
<div class="hidden">
  I'm Parent.
  <div class="visible">
    I'm Son.
  </div>
</div>

4.和display:none同樣不妨礙form表單的提交

5.CSS中的counter不會忽略

6.Transition對visibility的變化有效

7.visibility變化不會觸發reflow
因爲從visible設置爲hidden時，不會改變元素佈局相關的屬性，所以不會觸發reflow，只是靜靜地和其餘渲染變化一塊兒等待瀏覽器定時重繪界面。

總結

 如今咱們對display:none和visibility:hidden應該有更深刻的瞭解了，下次面試時咱們的答案會更豐富出彩哦！
 尊重原創，轉載請注意來自：https://www.cnblogs.com/fsjoh... 肥仔John^_^

引用

https://css-tricks.com/almana...
https://juejin.im/post/5b406f...