display:none、visibility:hidden:、opacity:0之间的区别

本文主要是介绍display:none、visibility:hidden:、opacity:0之间的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

空间占据：

• display:none，隐藏后不占据额外空间，不存在于render tree中（dom tree中存在）；它会产生回流和重绘；
• visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，在render tree中存在，它们俩只会引起页面重绘，不会引起重排。

子元素继承：

• display:none，不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了
• visibility:hidden ，会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
• opacity: 0， 会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

绑定：

• display:none， 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
• visibility:hidden， 元素上绑定的事件也无法触发；
• opacity: 0 ， 元素上面绑定的事件是可以触发的。

过渡动画：

• transition对于display和 visibility是无效的；对于opacity是有效。

这篇关于display:none、visibility:hidden:、opacity:0之间的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---