[前端三剑客之CSS]display:none opacity:0 visibility:hidden三角恋的爱恨情仇

三种方法均可隐藏元素。不同在于以下几点:

一、空间占据

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是有效.

如果觉得《[前端三剑客之CSS]display:none opacity:0 visibility:hidden三角恋的爱恨情仇》对你有帮助，请点赞、收藏，并留下你的观点哦！