display:none和visibility:hidden的区别

在使用CSS隐藏一些元素时，我们经常用到 display:none 和 visibility:hidden。两者差别如下：

1. 是否占据空间

display:none，该元素不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）。
visibility:hidden，该元素空间依旧存在。
即一个（display:none）不会在渲染树中出现，一个（visibility :hidden）会。

2. 是否渲染

display:none，会触发reflow（回流），进行渲染。
visibility:hidden，只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。

3. 是否是继承属性

display:none，display不是继承属性，元素及其子元素都会消失。
visibility:hidden，visibility是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出来。

4. 读屏器是否读取

读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。

5. 参考链接

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/display
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/visibility
• http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/
• http://snailsky.me/2014/08/18/displaynone-%E5%92%8C-visibilityhidden-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB%EF%BC%9F/
• https://www.jianshu.com/p/da8e9fba48b7
• https://www.nowcoder.com/questionTerminal/dce13fd5b59c41be80a22b38c5a32dc1

转载于:https://juejin.im/post/5b0585d8f265da0b7026483d