display: none 和 visibility：hidden区别

1，display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；visibility：hidden不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见。
display: none会引发重排，而visiibility: hidden只会引发重绘。
2，display：none是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；visibility：hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：visible，可以让子孙节点显示。
3，读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。

参考： 牛客网