本文详细介绍了CSS中visibility:hidden和display:none的区别，包括它们在隐藏元素时对空间占用、继承性、计时器影响以及与CSS3过渡效果的兼容性的不同。visibility属性仅使元素不可见但保留空间，而display:none则完全移除元素及其占用的空间。此外，visibility属性在CSS3过渡中可实现延迟显示效果，提升用户体验。
1、作用不同:
visibility:hidden将元素隐藏，但是在网页依然占用位置。
display:none将元素的显示设为无，即在网页中不占任何的位置。
2、使用后HTML元素有所不同:
visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将被‘抵消’即不存在。
3、定义不同:
visibility属性指定一个元素是否是可见的。
display属性设置或返回元素的显示类型。
4 有无继承性：
visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
5 与计时器的关系：
visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
6 与cs的关系：
CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
感兴趣的可以去查阅更多资料 谢谢大家
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
