CSS中visibility: hidden; 和 display:none 的区别

从结果上看 visibility: hidden; 和 display:none 都是隐藏 HTML元素.

但是也有明显的区别:

display:none 不为被隐藏的对象保留其物理空间;

visibility：hidden 为被隐藏的对象保留其物理空间

也就是说 display 的值变成block 时，它所在的结构才会被加载进来。而 visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。

一般来说这两个可以通用,但在一些特殊情况下必须区分,比如:

父元素的 display 为 none了,但想显示某个子元素,这个时候父元素就不能使用 display:none 了,而要使用 visibility: hidden,只需对要现实的子元素设置 visibility: visible 即可