本文探讨了CSS中三种隐藏元素的方法：display:none、visibility:hidden和opacity:0。display:none会使元素完全消失且不占用空间，导致浏览器重排和重绘；visibility:hidden则保持元素占位，仅使其不可见，只触发重绘；而opacity:0则使元素透明但保持占位。理解这些差异对于优化页面性能和布局至关重要。
1.display:none --- 不占位置
将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
显示效果如下：
2.visibility:hidden --- 占位置
设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
显示效果如下：
3.opacity:0 --- 占位置
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
显示效果如下：
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
