display: none 和 visibility: hidden

相同点：

• 他们都能让元素不可见

区别：

• display: none ： 会让元素完全从渲染树种消失，渲染的时候不占据任何空间；visibility: hidden； 不会让元素从渲染树种消失，渲染树元素继续占据空间，只是内容不可见
• display: none 是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子节点属性无法显示； visibility: hidden 是继承属性，子孙节点消失由于继承了 hidden ，通过设置 visibility: visiblie 可以让子孙节点显示。
• 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。
• 读屏器不会读取 display: none 元素内容。 会读取 visibility: hidden 元素内容