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有两个不一样的做用

1. 用于隐藏表格的行和列
2. 用于在不触发布局的状况下隐藏元素

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应该有更深刻的了解了，下次面试时咱们的答案会更丰富出彩哦！
 尊重原创，转载请注意来自：http://www.javashuo.com/article/p-pzxodhgq-bs.html 肥仔John^_^

引用

https://css-tricks.com/almanac/properties/v/visibility/
http://www.javashuo.com/article/p-eurefaij-h.html