面试题 -- CSS 隐藏元素的方法？

方法

1. display:none
2. visibility:hidden

联系与区别？

联系

1. 他们都能让 元素 不可见。

区别

1. DOM

• display:none: 会让元素从渲染树中消失，渲染时元素不占据任何空间。
• visibility:hidden: 不会让元素从渲染树消失，渲染时元素仍然占据空间，只是内容不可见。

2. 属性

• display:none: 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法继续显示。
• visibility:hidden: 是继承属性，子孙节点消失由于继承了 hidden 属性，通过设置 visibility：visible 可以让子孙节点继续显示。

3. 绘制

• 修改常规流中的元素的 display 会造成文档重排。修改 visibility 属性只会造成本元素的重绘。

4. 读取

• 读屏器不会读取设置为 display:none; 的元素内容,但是会读取设置为 visibility:hidden; 的元素内容。