成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

selfimpr / 2567人閱讀

摘要：不耽誤表單提交數(shù)據(jù)雖然我們無(wú)法看到的元素，但當(dāng)表單提交時(shí)依然會(huì)將隱藏的元素的值提交上去。讓元素在見(jiàn)面上不可視，但保留元素原來(lái)占有的位置。不過(guò)由于各瀏覽器實(shí)現(xiàn)效果均有出入，因此一般不會(huì)使用這個(gè)值。繼承父元素的值。

前言

?還記得面試時(shí)被問(wèn)起"請(qǐng)說(shuō)說(shuō)display:none和visibility:hidden的區(qū)別"嗎？是不是回答完display:none不占用原來(lái)的位置，而visibility:hidden保留原來(lái)的位置后，面試官就會(huì)心一笑呢？其實(shí)不止那么簡(jiǎn)單呢！本文我們將一起深究它倆的恩怨情仇，下次面試時(shí)我們可以回答得更出彩！

深入display:none

?我們都清楚當(dāng)元素設(shè)置display:none后，界面上將不會(huì)顯示該元素，并且該元素不占布局空間，但我們?nèi)匀豢梢酝ㄟ^(guò)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中沒(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;
}

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

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

*** START ***

*** END ***

瀏覽器直接顯示為

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

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




hidden

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元素的值提交上去。

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

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



  
son1

  
  
son3

結(jié)果就是：

1. son1
2. son3

8.Transition對(duì)display的變化不感冒
詳情請(qǐng)參考CSS魔法堂：Transition就這么好玩

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
?沒(méi)什么好說(shuō)的，就是在界面上顯示。
2.hidden
?讓元素在見(jiàn)面上不可視，但保留元素原來(lái)占有的位置。
3.collapse
?用于表格子元素(如tr,tbody,col,colgroup)時(shí)效果和display:none一樣，用于其他元素上時(shí)則效果與visibility:hidden一樣。不過(guò)由于各瀏覽器實(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的不就清晰可見(jiàn)了嗎？
1.父元素為visibility:hidden，而子元素可以設(shè)置為visibility:visible并且生效

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

結(jié)果：

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: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.hidden:hover{
  visibility: visible;
}

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í)重繪界面。

總結(jié)

?現(xiàn)在我們對(duì)display:none和visibility:hidden應(yīng)該有更深入的了解了，下次面試時(shí)我們的答案會(huì)更豐富出彩哦！
?尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注意來(lái)自：https://www.cnblogs.com/fsjoh... 肥仔John^_^

引用

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117014.html

相關(guān)文章

  • CSS魔法堂：小結(jié)一下Box Model與Positioning Scheme

    摘要：魔法堂重新認(rèn)識(shí)和魔法堂你一定誤解過(guò)的魔法堂就這個(gè)樣魔法堂說(shuō)說(shuō)那個(gè)被埋沒(méi)的志向深入細(xì)節(jié)后會(huì)發(fā)現(xiàn)中定位模式之間，和之間存在千絲萬(wàn)縷的關(guān)系，必須以俯瞰的角度捋一下。當(dāng)采用時(shí)，屬性的實(shí)際值會(huì)被重置為。由于和則需要通過(guò)來(lái)引入來(lái)提供盒子定位微調(diào)的功能。 前言 ?對(duì)于Box Model和Positioning Scheme中3種定位模式的細(xì)節(jié)，已經(jīng)通過(guò)以下幾篇文章記錄了我對(duì)其的理解和思考。?《CSS...

    szysky 評(píng)論0 收藏0

  • CSS魔法堂：重拾Border之——不僅僅是圓角

    摘要：擼代碼實(shí)現(xiàn)首頁(yè)檢驗(yàn)單查詢(xún)成品通用標(biāo)準(zhǔn)審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對(duì)角線(xiàn)，將作為邊的相交點(diǎn)。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right...

    _Dreams 評(píng)論0 收藏0

  • CSS魔法堂：改變單選框顏色就這么吹毛求疵！

    摘要：前言是否曾經(jīng)被業(yè)務(wù)提出能改改這個(gè)單選框的顏色吧讓它和主題顏色搭配一下吧，然后苦于原生不支持換顏色，最后被迫自己手?jǐn)]一個(gè)湊合使用。設(shè)置為的樣式行為特征單選框的行為特征，明顯就是選中與否，及選中狀態(tài)的改變事件，因此我們必須保持對(duì)外提供事件。 前言 ?是否曾經(jīng)被業(yè)務(wù)提出能改改這個(gè)單選框的顏色吧！讓它和主題顏色搭配一下吧！，然后苦于原生不支持換顏色，最后被迫自己手?jǐn)]一個(gè)湊合使用。若拋開(kāi)inpu...

    freecode 評(píng)論0 收藏0

  • CSS魔法堂：說(shuō)說(shuō)Float那個(gè)被埋沒(méi)的志向

    摘要：時(shí)其寬度始終保持占滿(mǎn)寬度的態(tài)度。清除浮動(dòng)就是為浮動(dòng)影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無(wú)法清除浮動(dòng)。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開(kāi)頭我們就用錯(cuò)了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...

    legendmohe 評(píng)論0 收藏0

  • WebComponent魔法堂:深究Custom Element 之 標(biāo)準(zhǔn)構(gòu)建

    摘要：明確各階段適合的操作用于初始化元素的狀態(tài)和設(shè)置事件監(jiān)聽(tīng)，或者創(chuàng)建。事件類(lèi)型轉(zhuǎn)換通過(guò)捕獲事件，然后通過(guò)發(fā)起事件來(lái)對(duì)事件類(lèi)型進(jìn)行轉(zhuǎn)換，從而觸發(fā)更符合元素特征的事件類(lèi)型。 前言 ?通過(guò)《WebComponent魔法堂:深究Custom Element 之 面向痛點(diǎn)編程》，我們明白到其實(shí)Custom Element并不是什么新東西，我們甚至可以在IE5.5上定義自己的alert元素。但這種簡(jiǎn)單...

    philadelphia 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<