display：none；与visibility：hidden的区别是什么？

1、display:none它不占据空间，对后面的元素布局没有任何影响，visibility:hidden会占据原本的空间，会影响后面元素的布局。

 这是不加任何样式的三个盒子的排列

 这是加了display:none的样式,第一个盒子已经完全消失了

 这是加了visibility：hidden的样式,虽然盒子不见了,但是那个位置依然被占据.

 

2、如果给父元素设置display:none，给它的子元素设置display:block，也不能显示出来，如果给父元素设置visibility:hidden，给它的子元素设置visibility: visible;，是可以显示出来的。

这是给子元素添加了visibility: visible后的页面.
3、visibility: hidden不会影响计数器的计数，虽然让一个元素隐藏了，但是它仍然被算进去了。而display: none会被忽略
总结：display：none； 使用该属性后，HTML 元素（对象）的宽度、高度等各种属性值都将丢失；
visibility：hidden； 使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），元素会占据原本的空间，也即是说它仍具有高度、宽度等属性值。会影响后面的元素布局