display和visibility的区别
一、空间占据
display: none;
是彻底消失,不在文档流中占位,浏览器也不会解析该元素
visibility:hidden;
是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
使用visibility:hidden
比display:none
性能上要好,display:none
切换显示时,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility
切换是否显示时则不会引起回流。
二、子元素继承
display:none
不会被子元素继承,但是父元素都不在了,子元素自然也就不会显示了,皮之不存,毛之安附~~
visibility:hidden
会被子元素继承,可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0
也会被子元素继承,但是不能通过设置子元素opacity: 0使其重新显示
三、事件绑定
display:none
的元素都已经不再页面存在了,因此肯定也无法触发它上面绑定的事件;
visibility:hidden
元素上绑定的事件也无法触发;
opacity: 0
元素上面绑定的事件是可以触发的。
四、过渡动画
transition
对于display
肯定是无效的;
transition
对于visibility
也是无效的;
transition
对于opacity
是有效。
以上就是display和visibility的区别是什么?的详细内容,更多请关注0133技术站其它相关文章!