display: none;与visibility: hidden;的区别

都能使元素不可见，区别：

• display：none会让元素在渲染树中消失，不占用任何空间；
  visibility: hidden;则保留元素占据的空间，也依旧在渲染树中。

• display：none是非继承属性，但由于元素在渲染树中消失因此子孙节点也会一并消失，通过修改子孙节点的属性也无法显示。
  visibility: hidden;是继承属性，子孙节点消失是由于继承了hidden值，那么只要设置visibility: visible;就可以让子孙节点显示

• 修改常规流中元素的display通常会造成文档重排。
  修改visibility属性只会造成本元素的重绘。