css中display:none與visibility:hidden的區別分析

這篇文章帶給大家的內容是關於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>Hide and Seek: You can't see me!</span>

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

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

*** START ***
<div>
  I'm parent!
  <div> I'm son! </div>
</div>
*** END ***

瀏覽器直接顯示為

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

4.無法取得焦點
本來無一盒，何處惹焦點呢^_^即使透過tab鍵也是沒辦法的

<!-- 真心不会获得焦点 -->
<input>
<div>hidden</div>

5.無法回應任何事件，無論是捕獲、命中目標和冒泡階段均不可以
由於display:none的元素根本不會在介面上渲染，就是連1個像素的都不佔，因此自然無法透過滑鼠點擊命中，而元素也無法取得焦點，那麼也不能成為鍵盤事件的命中目標；而父元素的display為none時，子元素的display必定為none，因此元素也沒有機會位於事件捕捉或冒泡階段的路徑路徑上，因此display:none的元素無法回應事件。

6.不耽誤form表單提交資料
雖然我們無法看到display:none的元素，但當表單提交時仍然會將隱藏的input元素的值提交上去。

     

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

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

<div>
  <div>son1</div>
  <div>son2</div>
  <div>son3</div>
</div>

結果就是：

1. son1
2. son3

8.Transition對display的變化不感冒

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

深入visibility

visibility有兩個不同的作用

用於隱藏表格的行和列

用於在不觸發佈局的情況下隱藏元素

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>
  I'm Parent.
  <div>
    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&#39;m Parent.
  <div class="visible">
    I&#39;m Son.
  </div>
</div>

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

#5.CSS中的counter不會忽略

6.Transition對visibility的變化有效

7.visibility變更不會觸發reflow
由於從visible設定為hidden時，不會改變元素佈局相關的屬性，因此不會觸發reflow，只是靜靜地和其他渲染變化一起等待瀏覽器定時重繪介面。

#

以上是css中display:none與visibility:hidden的區別分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！