本文详细比较了CSS中display:none、visibility:hidden和opacity:0三种隐藏元素方法的差异，包括元素可见性、空间占用、浏览器行为和事件响应。了解它们在实际开发中的应用场景和重排重绘原理。
CSS中隐藏页面元素的几种方式和区别
总结方法：
display : none ;
visibility : hidden ;
opacity : 0;
方法一 ： display : none ；
元素不可见，不占据空间，会导致浏览器重排的重绘，无法响应点击事件
方法二 ： visibility : hidden
从页面上隐藏，DOM依旧存在，不会发生重排，但是会发生重绘。
方法三 ： opacity : 0
表示元素的透明度，只是页面上透明度为0，自身事件仍然可以触发
总结区别
扩展 ：
重绘 ：元素外观导致的浏览器行为，比如 ： 修改CSS样式
重排 ： DOM元素被JS触发，渲染树需要重新计算
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
