欢迎大家来到IT世界,在知识的湖畔探索吧!
visibility:hidden和display:none的区别在于:
1.作用不同:visibility:hidden将元素隐藏,但是在网页中该占的位置还是占着。display:none将元素的显示设为无,即在网页中不占任何的位置。
2.使用后HTML元素有所不同:visibility:hidden,使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。display:none,使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”。
3.定义不同:visibility属性指定一个元素是否是可见的。display这个属性用于定义建立布局时元素生成的显示框类型。
元素隐藏和显示最常用的为 display:none 和 visibility:hidden
dispaly:none 设置该属性后,该元素下的元素都会隐藏,占据的空间消失
visibility:hidden 设置该元素后,元素虽然不可见了,但是依然占据空间的位置
其他区别
1.visibility 具有继承性,其子元素也会继承此属性,若设置 visibility:visible,则子元
素会显示
2.visibility 不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。
3.在 CSS3 的 transition 中支持 visibility 属性,但是不支持 display,因为 transition 可以延迟执行,因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验
4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/83495.html