CSS display:none和visibility:hidden的区别:
visibility:hidden隐藏,但在浏览时保留位置;CSS display:none视为不存在,且不加载!
CSS display:none;
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属值。
具体区别请看演示代码吧:
如上图所示,第一个所示display为none的div被隐藏,且所在位置被后续的div顶上;
而第四个所示visibility为hidden的div虽然视觉上看不到,但是其所占据的空间位置仍在,并没有被后续的div顶上。