本文主要是介绍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之间的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
