display: none, visibility: hidden 和 opacity: 0的比较

1.关于是否脱离文档流

display: none会使元素脱离文档流,不占据原来的空间,会引起页面的重排

visibility: hidden和opacity: 0 虽然会使元素不可见,但是元素仍然占据原来的位置,不会脱离文档流

2.关于继承

display: none,虽然被隐藏的子元素也会一起隐藏,但是子元素并不继承display: none,子元素仍然具有本身的display属性,但是无法脱离父元素单独显示,opacity也是一样的.****

但是visibility就不一样了,我们将visibility的子元素设置为visibility:visible

3.关于事件

display:none元素都已经不占据原先的位置,你都找不到元素了,事件你也就别想触发了.
visibility:hidden也不行,为啥呢,暂时不清楚,没有官方说法,也还没有找到比较有说服力的理由,后面来 更.
opacity: 0.仍然可以触发事件.

4.关于transition

display: none无法使用transition动画的,不会呈现过渡的效果
transition是支持visibility的,visibility过渡过程的值范围是0-1,但是,当visibility的值大于0,显示都是一样 的,所以也基本上没有过渡的效果,不过可以结合opacity一起使用,效果跟单独使用opacity差不多,显得很多此一举
transition是支持opacity的,可以用来做动画效果

暂时总结到这么多,有什么没有说清楚或者有错误的地方欢迎指正,共同进步~