第 6 题：分析比较display: none;、visibility: hidden; 和 opacity: 0;的优劣和适用场景。

[janessasmith]

这三者的区别（不同点）是：

1. 空间占据
2. 株连性
3. 回流与重绘
4. 过渡动画 transition 支持度

空间占据：

• display: none: 会让元素完全从渲染树中消失（会使元素脱离文档流），渲染的时候不占据任何空间, 不能点击；
• visibility: hidden: 不会让元素从渲染树消失（不会使元素脱离文档流），渲染元素继续占据空间，只是内容不可见，不能点击；
• opacity: 0: 不会让元素从渲染树消失（不会使元素脱离文档流），渲染元素继续占据空间，只是内容不可见，可以点击。

株连性：

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

回流与重绘：

• display: none : 修改元素会造成文档回流，读屏器不会读取display: none元素内容，性能消耗较大；
• visibility: hidden: 修改元素只会造成本元素的重绘，读屏器读取visibility: hidden元素内容，性能消耗较少；
• opacity: 0: CSS3硬件加速，修改元素不触发回流重绘，性能消耗较少。
  浏览器的回流与重绘 (Reflow & Repaint)相关介绍

过渡动画 transition 支持度

• display: none: transition 不支持 display；
• opacity: 0: transition 支持 opacity；
• visibility: hidden: transition 支持 visibility。
  具体可查：CSS animated properties

扩展问题：用 CSS 隐藏页面上的一个元素有哪几种方法？

这道题绝大多数人的答案都是 display: none; visibility: hiden; opacity: 0; 这三种，但如果还能说出下面三种我觉得也是加分的：

• 设置 fixed 并设置足够大负距离的 left top 使其“隐藏”；
• 用层叠关系 z-index 把元素叠在最底下使其“隐藏”；
• 用 text-indent:-9999px 使其文字隐藏。