本文探讨了CSS中display:none、opacity:0和visibility:hidden三种隐藏元素方法的区别。display:none不占据空间，但会影响布局；opacity:0和visibility:hidden仍占据空间，且后者可被子元素继承。同时，display:none和visibility:hidden无法触发事件，而opacity:0可以。此外，transition只对opacity生效。这些特性在动画和交互设计中具有重要应用。
三种方法均可隐藏元素。不同在于以下几点:
一、空间占据
display:none 的元素不会占据，但是设置display:none 会引发回流和重绘
opacity:0和visibility:hidden 的元素会占据位置，但是改变这属性时只会触发重绘
二、子元素继承
display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了。
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示
三、事件绑定
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0 元素上面绑定的事件是可以触发的。
四、过渡动画
transition对于display肯定是无效的，大家应该都知道；
transition对于visibility也是无效的；
transition对于opacity是有效.
扫一扫
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
