css中display:none與visibility:hidden有什么區(qū)別

今天小編給大家分享一下css中display:none與visibility:hidden有什么區(qū)別的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

　　深入display:none

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

　　 這個(gè)涉及到瀏覽器的渲染原理：瀏覽器會(huì)解析HTML標(biāo)簽生成DOMTree，解析CSS生成CSSOM，然后將DOMTree和CSSOM合成生成RenderTree，元素在RenderTree中對(duì)應(yīng)0或多個(gè)盒子，然后瀏覽器以盒子模型的信息布局和渲染界面。而設(shè)置為display:none的元素則在RenderTree中沒(méi)有生成對(duì)應(yīng)的盒子模型，因此后續(xù)的布局、渲染工作自然沒(méi)它什么事了，至于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布爾屬性，讓開(kāi)發(fā)者自定義元素的隱藏性

　　/*兼容原生不支持hidden屬性的瀏覽器*/

　　[hidden]{

　　display:none;

　　}

　　<spanhidden>HideandSeek:Youcan'tseeme!</span>

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

　　.hidden{

　　display:none;

　　}

　　.visible{

　　display:block;

　　}

　　***START***

　　<divclass="hidden">

　　I'mparent!

　　<divclass="visible">I'mson!</div>

　　</div>

　　***END***

　　瀏覽器直接顯示為

　　***START***

　　***END***

　　4.無(wú)法獲取焦點(diǎn)

　　本來(lái)無(wú)一盒，何處惹焦點(diǎn)呢^_^即使通過(guò)tab鍵也是沒(méi)辦法的

　　<!--真心不會(huì)獲得焦點(diǎn)-->

　　<inputtype="hidden">

　　<divtabindex="1"style="display:none">hidden</div>

　　5.無(wú)法響應(yīng)任何事件，無(wú)論是捕獲、命中目標(biāo)和冒泡階段均不可以

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

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

　　雖然我們無(wú)法看到display:none的元素，但當(dāng)表單提交時(shí)依然會(huì)將隱藏的input元素的值提交上去。

　　<form>

　　<inputtype="hidden"name="id">

　　<inputtype="text"name="gguid"style="display:none">

　　</form>

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

　　.start{

　　counter-reset:son0;

　　}

　　.son{

　　counter-increment:son1;

　　}

　　.son::before{

　　content:counter(son)".";

　　}

　　<divclass="start">

　　<divclass="son">son1</div>

　　<divclass="son"style="display:none">son2</div>

　　<divclass="son">son3</div>

　　</div>

　　結(jié)果就是：

　　1.son1

　　2.son3

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

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

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

　　深入visibility

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

　　用于隱藏表格的行和列

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

　　4個(gè)有效值

　　1.visible

　　&emsp;沒(méi)什么好說(shuō)的，就是在界面上顯示。

　　2.hidden

　　&emsp;讓元素在見(jiàn)面上不可視，但保留元素原來(lái)占有的位置。

　　3.collapse

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

　　4.inherit

　　&emsp;繼承父元素的visibility值。

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

　　&emsp;上面我們已經(jīng)對(duì)display:none列出8點(diǎn)注意事項(xiàng)，那么我們僅需對(duì)照它逐一列出visibility的不就清晰可見(jiàn)了嗎？

　　1.父元素為visibility:hidden，而子元素可以設(shè)置為visibility:visible并且生效

　　div{

　　border:solid2pxblue;

　　}

　　.visible{

　　visibility:visible;

　　}

　　.hidden{

　　visibility:hidden;

　　}

　　<divclass="hidden">

　　I'mParent.

　　<divclass="visible">

　　I'mSon.

　　</div>

　　</div>

　　結(jié)果：

　　2516558939-5bb02e7f4838b_articlex.png

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

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

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

　　div{

　　border:solid2pxblue;

　　}

　　.visible{

　　visibility:visible;

　　}

　　.hidden{

　　visibility:hidden;

　　}

　　.hidden:hover{

　　visibility:visible;

　　}

　　<divclass="hidden">

　　I'mParent.

　　<divclass="visible">

　　I'mSon.

　　</div>

　　</div>

　　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)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。