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 元素(对象)仅仅是在视觉上看不见(完全透明),元素会占据原本的空间,也即是说它仍具有高度、宽度等属性值。会影响后面的元素布局