display：none 与 visibility：hidden

链接： https://www.nowcoder.com/questionTerminal/dce13fd5b59c41be80a22b38c5a32dc1
来源：牛客网

1，

display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；

visibility：hidden不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见。

2，

display：none是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；

visibility：hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：visible，可以让子孙节点显示。

3，读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。