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

selfimpr 發布于2019-08-30 15:54 / 2565人閱讀

摘要：不耽誤表單提交數據雖然我們無法看到的元素，但當表單提交時依然會將隱藏的元素的值提交上去。讓元素在見面上不可視，但保留元素原來占有的位置。不過由于各瀏覽器實現效果均有出入，因此一般不會使用這個值。繼承父元素的值。

前言

?還記得面試時被問起"請說說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;
}

Hide and Seek: You can"t see me!

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

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

*** START ***

  I"m parent!
   I"m son! 

*** END ***

瀏覽器直接顯示為

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

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



hidden

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) ". ";
}


  son1
  son2
  son3

結果就是：

1. son1
2. son3

8.Transition對display的變化不感冒
詳情請參考CSS魔法堂：Transition就這么好玩

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;
}

  I"m Parent.
  
    I"m Son.

結果：

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;
}

  I"m Parent.
  
    I"m Son.

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

5.CSS中的counter不會忽略

6.Transition對visibility的變化有效

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

總結

?現在我們對display:none和visibility:hidden應該有更深入的了解了，下次面試時我們的答案會更豐富出彩哦！
?尊重原創，轉載請注意來自：https://www.cnblogs.com/fsjoh... 肥仔John^_^

引用

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

GPU云服務器云服務器創造與魔法云鳥便宜的服務器創造與魔法所有服務器的云鳥在哪創造與魔法怎么換服務器 css與html的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117014.html

CSS魔法堂：小結一下Box Model與Positioning Scheme

摘要：魔法堂重新認識和魔法堂你一定誤解過的魔法堂就這個樣魔法堂說說那個被埋沒的志向深入細節后會發現中定位模式之間，和之間存在千絲萬縷的關系，必須以俯瞰的角度捋一下。當采用時，屬性的實際值會被重置為。由于和則需要通過來引入來提供盒子定位微調的功能。前言 ?對于Box Model和Positioning Scheme中3種定位模式的細節，已經通過以下幾篇文章記錄了我對其的理解和思考。?《CSS...

szysky 2019-08-30 12:57 評論0 收藏0
CSS魔法堂：重拾Border之——不僅僅是圓角

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

_Dreams 2019-08-30 13:01 評論0 收藏0
CSS魔法堂：改變單選框顏色就這么吹毛求疵！

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

freecode 2019-08-29 16:52 評論0 收藏0
CSS魔法堂：說說Float那個被埋沒的志向

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

legendmohe 2019-08-30 12:55 評論0 收藏0
WebComponent魔法堂:深究Custom Element 之標準構建

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

philadelphia 2019-08-21 14:34 評論0 收藏0