CSS魔法堂：display:none與visibility:hidden的恩怨情仇
前言
還記得面試時被問起"請說說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;
- }
- <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.無法響應任何事件，無論是捕獲、***目標和冒泡階段均不可以
由于display:none的元素根本不會在界面上渲染，就是連1個像素的都不占，因此自然無法通過鼠標點擊***，而元素也無法獲取焦點，那么也不能成為鍵盤事件的***目標；而父元素的display為none時，子元素的display必定為none，因此元素也沒有機會位于事件捕獲或冒泡階段的路徑路徑上，因此display:none的元素無法響應事件。
6.不耽誤form表單提交數據
雖然我們無法看到display:none的元素，但當表單提交時依然會將隱藏的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>
結果就是：
- 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;
- }
- <div class="hidden">
- I'm Parent.
- <div class="visible">
- I'm Son.
- </div>
- </div>
結果：
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;
- }
- <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變化不會觸發reflow
由于從visible設置為hidden時，不會改變元素布局相關的屬性，因此不會觸發reflow，只是靜靜地和其他渲染變化一起等待瀏覽器定時重繪界面。
總結
現在我們對display:none和visibility:hidden應該有更深入的了解了，下次面試時我們的答案會更豐富出彩哦！
尊重原創，轉載請注意來自：https://www.cnblogs.com/fsjoh... 肥仔John^_^
