display:none 与 visibility:hidden 的区别?

display:none 与 visibility:hidden 的区别?visibility hidden 和 display none 的区别在于 1 作用不同 visibility hidden 将元素隐藏 但是在网页中该占的位置还是占着 display none 将元素的显示设为无 即在网页中不占任何的位置 2

大家好,欢迎来到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 会引起重绘。

display:none 与 visibility:hidden 的区别?

#挑战30天在头条写日记#

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/95399.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信