visibility:hidden和display:none的区别

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延时显示效果。提高用户体验。

感兴趣的可以去查阅更多资料 谢谢大家