本文详细探讨了CSS中display:none、visibility:hidden和opacity:0三种隐藏元素方式的相同点与不同点，包括它们对结构、继承性及性能的影响。display:none会使元素完全消失，不占用空间，而visibility:hidden则保持空间占用但不可见。opacity:0的元素虽然透明，却仍占用空间并可点击。此外，display:none和opacity:0会影响子孙元素，但visibility:hidden的子孙元素可被显示。在性能方面，display:none最消耗资源，visibility:hidden次之，而opacity:0的性能消耗取决于是否涉及过渡或动画。
相同点：使用元素在页面上都不可见；
不同点：
1. 结构：
| display：none | 从渲染树中消失 | 不占据空间 | 不可点击 |
| visibility：hidden | 从渲染树未消失 | 占据空间 | 不可点击 |
| opacity：0 | 从渲染树未消失 | 占据空间 | 可以点击 |
2. 继承性：
display：none 是继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示；
opacity：0； 会被子孙元素继承，即使子孙元素修改为opacity：1，也无法显示；
visivility:hidden 会被子孙元素继承，且修改子孙元素的visibility：visible 可以使子孙元素显示；
3.性能：display：none 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 ；
visibility：hidden 修改元素仅仅是外观的改变 并没有改变布局，会引起被修改元素的重绘（repaint），性能消耗相对较少；
opacity: 0 ：分情况讨论 ，在 Blink 和 WebKit 内核的浏览器中，对于应用了 transition 或者 animation的 opacity 元素，浏览器会将渲染层提升为合成层。也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。此时不会引起重绘；
其他情况，修改元素会造成重绘，性能消耗较少；详细合成层优化原理查看更多
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
