前言
还记得面试时被问起 ” 请说说 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^_^
引用
https://css-tricks.com/almana…https://juejin.im/post/5b406f…