本篇文章给大家带来的内容是关于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;}f47ec338b6127615a4b0c1f9e59a944ehide and seek: you can't see me!54bdf357c58b8a65c66d7c19c8e4d114
3.父元素为display:none，子孙元素也难逃一劫
.hidden{  display: none;}.visible{  display: block;}*** start ***4de057a13dc4c85e36afd54b320d91e7  i'm parent!  005e80aebca2fce5e5bcefcaa50b56ec i'm son! 16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68*** end ***
浏览器直接显示为
*** start ****** end ***
4.无法获取焦点
本来无一盒，何处惹焦点呢^_^即使通过tab键也是没办法的
1cafb7342a49e9ae58ffea278b4c0b86c2d3c2988c95fc2257156ee14cee10362e5071fa5b1e66e16d91e15da210db0ehidden16b28748ea4df4d9c2150843fecfba68
5.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以
由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为none时，子元素的display必定为none，因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上，因此display:none的元素无法响应事件。
6.不耽误form表单提交数据
虽然我们无法看到display:none的元素，但当表单提交时依然会将隐藏的input元素的值提交上去。
ff9c23ada1bcecdd1a0fb5d5a0f18437  605ac4076ea81e539de2fb6132b05a50  ba3765f48e62df92585d2f1b0cc701eff5a47148e367a6035fd7a2faa965022e
7.css中的counter会忽略display:none的元素
.start{  counter-reset: son 0;}.son{  counter-increment: son 1;}.son::before{  content: counter(son) . ;}c50775a55ba9f162b0017c9c75b72080  ae86c4e82e8d5375cfeae04d17c0edbdson116b28748ea4df4d9c2150843fecfba68  9ddeec299714e7b1ed13c7b581ecd4d2son216b28748ea4df4d9c2150843fecfba68  ae86c4e82e8d5375cfeae04d17c0edbdson316b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
结果就是：
1. son12. son3
8.transition对display的变化不感冒
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;}4de057a13dc4c85e36afd54b320d91e7  i'm parent.  005e80aebca2fce5e5bcefcaa50b56ec    i'm son.  16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
结果：
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，只是静静地和其他渲染变化一起等待浏览器定时重绘界面。
以上就是css中display:none与visibility:hidden的区别分析的详细内容。