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

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

display：none会让元素在渲染树中消失，不占用任何空间；

visibility: hidden;则保留元素占据的空间，也依旧在渲染树中。

display：none是非继承属性，但由于元素在渲染树中消失因此子孙节点也会一并消失，通过修改子孙节点的属性也无法显示。

visibility: hidden;是继承属性，子孙节点消失是由于继承了hidden值，那么只要设置visibility: visible;就可以让子孙节点显示

修改常规流中元素的display通常会造成文档重排。

修改visibility属性只会造成本元素的重绘。