這篇文章主要介紹css中display:none與visibility:hidden的區(qū)別是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站長(zhǎng)期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為永州企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站制作，永州網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

深入display:none

?我們都清楚當(dāng)元素設(shè)置display:none后，界面上將不會(huì)顯示該元素，并且該元素不占布局空間，但我們?nèi)匀豢梢酝ㄟ^JavaScript操作該元素。但為什么會(huì)這樣呢？
這個(gè)涉及到瀏覽器的渲染原理：瀏覽器會(huì)解析HTML標(biāo)簽生成DOM Tree，解析CSS生成CSSOM，然后將DOM Tree和CSSOM合成生成Render Tree，元素在Render Tree中對(duì)應(yīng)0或多個(gè)盒子，然后瀏覽器以盒子模型的信息布局和渲染界面。而設(shè)置為display:none的元素則在Render Tree中沒有生成對(duì)應(yīng)的盒子模型，因此后續(xù)的布局、渲染工作自然沒它什么事了，至于DOM操作還是可以的。
但除了上面的知識(shí)點(diǎn)外，還有以下8個(gè)點(diǎn)我們需要注意的
1.原生默認(rèn)display:none的元素
其實(shí)瀏覽器原生元素中有不少自帶display:none的元素，如link,script,style,dialog,input[type=hidden]等.

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

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

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

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

*** START ***

  I'm parent!
  
 I'm son! 

*** END ***

瀏覽器直接顯示為

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

4.無法獲取焦點(diǎn)
本來無一盒，何處惹焦點(diǎn)呢^_^即使通過tab鍵也是沒辦法的

hidden

5.無法響應(yīng)任何事件，無論是捕獲、命中目標(biāo)和冒泡階段均不可以
由于display:none的元素根本不會(huì)在界面上渲染，就是連1個(gè)像素的都不占，因此自然無法通過鼠標(biāo)點(diǎn)擊命中，而元素也無法獲取焦點(diǎn)，那么也不能成為鍵盤事件的命中目標(biāo)；而父元素的display為none時(shí)，子元素的display必定為none，因此元素也沒有機(jī)會(huì)位于事件捕獲或冒泡階段的路徑路徑上，因此display:none的元素?zé)o法響應(yīng)事件。

6.不耽誤form表單提交數(shù)據(jù)
雖然我們無法看到display:none的元素，但當(dāng)表單提交時(shí)依然會(huì)將隱藏的input元素的值提交上去。

7.CSS中的counter會(huì)忽略display:none的元素

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


  
son1
  
son2
  
son3

結(jié)果就是：

1. son1
2. son3

8.Transition對(duì)display的變化不感冒

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

深入visibility

visibility有兩個(gè)不同的作用

用于隱藏表格的行和列

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

4個(gè)有效值

1.visible
沒什么好說的，就是在界面上顯示。
2.hidden
讓元素在見面上不可視，但保留元素原來占有的位置。
3.collapse
用于表格子元素(如tr,tbody,col,colgroup)時(shí)效果和display:none一樣，用于其他元素上時(shí)則效果與visibility:hidden一樣。不過由于各瀏覽器實(shí)現(xiàn)效果均有出入，因此一般不會(huì)使用這個(gè)值。
4.inherit
繼承父元素的visibility值。

對(duì)比清楚display:none和visibility:hidden

?上面我們已經(jīng)對(duì)display:none列出8點(diǎn)注意事項(xiàng)，那么我們僅需對(duì)照它逐一列出visibility的不就清晰可見了嗎？
1.父元素為visibility:hidden，而子元素可以設(shè)置為visibility:visible并且生效

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}

  I'm Parent.
  

    I'm Son.
  

結(jié)果：

2.和display:none一樣無法獲得焦點(diǎn)

3.可在冒泡階段響應(yīng)事件
由于設(shè)置為visibility:hidden的元素其子元素可以為visibility:visible，因此隱藏的元素有可能位于事件冒泡的路徑上因此下面代碼中，將鼠標(biāo)移至.visible時(shí)，.hidden會(huì)響應(yīng)hover事件顯示。

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.hidden:hover{
  visibility: visible;
}

  I'm Parent.
  

    I'm Son.
  

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

5.CSS中的counter不會(huì)忽略

6.Transition對(duì)visibility的變化有效

7.visibility變化不會(huì)觸發(fā)reflow
由于從visible設(shè)置為hidden時(shí)，不會(huì)改變?cè)夭季窒嚓P(guān)的屬性，因此不會(huì)觸發(fā)reflow，只是靜靜地和其他渲染變化一起等待瀏覽器定時(shí)重繪界面。

以上是css中display:none與visibility:hidden的區(qū)別是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！