一、display:none和visibility:hidden的区别
1.1 空间占据
1.2 回流和渲染
1.3 株连性
二、空间占据
display:none 隐藏后的元素不占据任何空间，而 visibility:hidden 隐藏的元素空间依旧存在。
三、回流和渲染
display:none 隐藏产生回流和重绘（reflow 和 repaint），而 visibility:hidden 只产生重绘。
三、株连性
display:none 就是“株连性”明显的声明：一旦父节点元素应用了 display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。
四、隐藏失效
若子孙元素应用了 visibility:visible，则这个子孙元素不但不会隐藏，而且会显现出来。
Code
Example
