怎么理解CSS中display:none與visibility:hidden

本篇內(nèi)容介紹了“怎么理解CSS中display:none與visibility:hidden”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

深入display:none

我們都清楚當(dāng)元素設(shè)置display:none后，界面上將不會顯示該元素，并且該元素不占布局空間，但我們?nèi)匀豢梢酝ㄟ^JavaScript操作該元素。但為什么會這樣呢？

這個涉及到瀏覽器的渲染原理：瀏覽器會解析HTML標(biāo)簽生成DOM Tree，解析CSS生成CSSOM，然后將DOM Tree和CSSOM合成生成Render Tree，元素在Render Tree中對應(yīng)0或多個盒子，然后瀏覽器以盒子模型的信息布局和渲染界面。而設(shè)置為display:none的元素則在Render Tree中沒有生成對應(yīng)的盒子模型，因此后續(xù)的布局、渲染工作自然沒它什么事了，至于DOM操作還是可以的。

但除了上面的知識點外，還有以下8個點我們需要注意的

1.原生默認(rèn)display:none的元素

其實瀏覽器原生元素中有不少自帶display:none的元素，如link,script,style,dialog,input[type=hidden]等

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

/* 兼容原生不支持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.無法響應(yīng)任何事件，無論是捕獲、***目標(biāo)和冒泡階段均不可以

由于display:none的元素根本不會在界面上渲染，就是連1個像素的都不占，因此自然無法通過鼠標(biāo)點擊***，而元素也無法獲取焦點，那么也不能成為鍵盤事件的***目標(biāo)；而父元素的display為none時，子元素的display必定為none，因此元素也沒有機(jī)會位于事件捕獲或冒泡階段的路徑路徑上，因此display:none的元素?zé)o法響應(yīng)事件。

6.不耽誤form表單提交數(shù)據(jù)

雖然我們無法看到display:none的元素，但當(dāng)表單提交時依然會將隱藏的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>

結(jié)果就是：

1. son1  2. son3

8.Transition對display的變化不感冒

詳情請參考CSS魔法堂：Transition就這么好玩

9.display變化時將觸發(fā)reflow

撇開display:none，我們看看display:block表示元素位于BFC中，而display:inline則表示元素位于IFC中，也就是說display的用于就是設(shè)置元素所屬的布局上下文，若修改display值則表示元素采用的布局方式已發(fā)生變化，不觸發(fā)reflow才奇怪呢！

深入visibility

visibility有兩個不同的作用

1.  用于隱藏表格的行和列

2.  用于在不觸發(fā)布局的情況下隱藏元素

4個有效值

1.visible

沒什么好說的，就是在界面上顯示。

2.hidden

讓元素在見面上不可視，但保留元素原來占有的位置。

3.collapse

用于表格子元素(如tr,tbody,col,colgroup)時效果和display:none一樣，用于其他元素上時則效果與visibility:hidden一樣。不過由于各瀏覽器實現(xiàn)效果均有出入，因此一般不會使用這個值。

4.inherit

繼承父元素的visibility值。

對比清楚display:none和visibility:hidden

上面我們已經(jīng)對display:none列出8點注意事項，那么我們僅需對照它逐一列出visibility的不就清晰可見了嗎？

1.父元素為visibility:hidden，而子元素可以設(shè)置為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>

結(jié)果：

2.和display:none一樣無法獲得焦點

3.可在冒泡階段響應(yīng)事件

由于設(shè)置為visibility:hidden的元素其子元素可以為visibility:visible，因此隱藏的元素有可能位于事件冒泡的路徑上因此下面代碼中，將鼠標(biāo)移至.visible時，.hidden會響應(yīng)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變化不會觸發(fā)reflow

由于從visible設(shè)置為hidden時，不會改變元素布局相關(guān)的屬性，因此不會觸發(fā)reflow，只是靜靜地和其他渲染變化一起等待瀏覽器定時重繪界面。

“怎么理解CSS中display:none與visibility:hidden”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！