display：none和visibility：hidden

display：none和visibility：hidden的区别和联系：

• 联系：二者都是设置元素不可见

• 区别：

  • display：none会使元素从整个DOM树中消失，渲染的时候不占据空间。设置了visibility：hidden的元素仍然在DOM树中占据空间，只是元素不可见。

  • display：none会使页面发生回流，visibility：hidden只是使此元素发生重绘。

  • display：none是非继承属性，子孙元素消失是因为父元素在DOM在中消失了，修改子孙元素仍无法使子孙元素显示出来。

    visibility：hidden是继承属性，子孙元素消失是因为继承了父元素的hidden属性，修改子元素的visibility: visible，子孙元素会重新显示出来。