比较 opacity: 0、visibility: hidden、display: none 优劣和区别

结构上：

• display:none 会从渲染树中消失，元素不占据空间且无法点击；
• visibility: hidden 不会从渲染树中消失，元素继续占据空间但无法点击；
• opacity: 0 不会从渲染树消失，元素占据空间且可点击。

继承性：

• display: none 和 opacity: 0 是非继承属性；父元素设置了 display:none 或 opacity: 0，子元素无论怎么设置都无法显示；
• visibility: hidden 会被子元素继承，并且子元素可以通过设置设置 visibility: visible; 来取消隐藏。

性能：

• display: none 会引起重排，性能消耗较大；
• visibility: hidden 会引起重绘，性能消耗相对较小；
• opacity: 0 会重建图层，性能较高