display: none 和 visibility: hidden 的区别

区别有三点：

1.空间占据。这两个声明都可以让元素隐藏，不同之处在于display:none隐藏后元素不占据任何空间，而visibility:hidden隐藏后元素空间依旧存在。

2.回流与渲染。display:none 产生reflow和repaint(回流与重绘)，而visibility:hidden 没有这个影响前端性能的问题。

（注：reflow，就是由于某些原因（如用户改变浏览器窗口的大小，使用一些JavaScript方法，包括计算样式，对DOM进行元素的添加或删除，或是改变元素的class等。），要将元素回过头来重新“流”一遍。）

3.株连性。所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

通常情况下，我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。而实际上却存在隐藏“失效”的情况。何时隐藏“失效”？很简单，如果子孙元素应用了visibility:visible，那么这个子孙元素又会显现出来。