本文详细介绍了CSS中用于隐藏元素的三种方式：display:none、visibility:hidden和opacity:0。display:none使元素完全脱离文档流，不占用空间，无法触发事件；visibility:hidden保持元素在文档流中，但不可见，不影响布局；opacity:0则让元素透明，仍占据空间并能响应事件。理解这些差异对于网页布局和交互设计至关重要。
display: none 该元素以及它的所有后代元素都会隐藏，会使元素脱离文档流，不占据原来的空间，会引起页面的重排（隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失）
visibility: hidden 可以隐藏这个元素，不会脱离文档流，隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是不会影响页面布局。
opacity:0 该元素隐藏起来了，不会脱离文档流，不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
| 是否脱离文档流 | 是否影响页面布局 | 是否依然可触发事件 | 子元素是否继承 | transition过渡动画 | |
| display: none | 是 | 是 | 否 | 不会 | 无效 |
| visibility: hidden | 否 | 否 | 否 | 会，通过设置子元素visibility:visible来显示子元素 | 无效 |
| opacity:0 | 否 | 否 | 是 | 会，但是不能设置子元素opacity来重新显示 | 有效 |
扫一扫
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
