本文介绍了CSS中四种隐藏元素的方法：overflow:hidden、display:none、visibility:hidden和opacity:0。这些方法在隐藏元素的同时，对元素的存在感、空间占用及事件监听等方面有不同的影响。display:none不渲染元素且不占空间，visibility:hidden元素仍占空间但不可见，opacity:0则使元素透明但保留空间。在性能上，display:none和visibility:hidden分别涉及重排和重绘，而opacity:0性能最佳，提升为合成层。
方式一：overflow:hidden
这种方式会使得超出的元素隐藏，对行内元素无效，必须是块级元素，隐藏之后元素依然占据着位置。
方式二：display:none
这种方式会使得元素不存在，占据的位置也不存在。
方式三：visibility: hidden
这种方式会使得元素不存在，但是占据的位置依然存在。
方式四：opacity: 0
这种方式会使得元素的透明度为0，隐藏，但是位置依然占据着。
display: none和visibility: hidden和opcaity: 0三者这件的区别是什么？
DOM结构
- display: none，浏览器不会渲染该元素，不占据空间。
- visibility: hidden，元素被隐藏，但是会被渲染，占据空间。
- opacity: 0，透明度为0，元素隐藏，占据空间。
事件监听
- display: none，无法进行DOM事件监听。
- visibility: hidden，无法进行DOM事件监听。
- opacity: 0，无法进行DOM事件监听。
性能
- display: none，动态改变该属性会引起重排，性能较差。
- visibility: hidden, 动态改变此属性会引起重绘，性能较高。
- opacity: 0，提升为合成层，不会触发重绘，性能较高。
继承
- display: none，不会被子元素继承，因为子元素不会被渲染。
- visibility: hidden，会被子元素继承，子元素可以通过设置visibility: visibile来取消隐藏。
- opacity: 0，会被子元素继承，并且子元素无法通过opacity:1来取消隐藏。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
