display: none与visibility: hidden的区别

在CSS属性中，将元素隐藏可以通过两种属性来设置。

1. display: none;

2. visibility: hidden;

这两种方法在原理上是有一定的差别的。

1. 使用display: none;的元素在隐藏后不会占用原来的页面空间。

2. 使用visibility: hidden;的元素在隐藏后会继续占用原来的页面空间。

因此如果使用display: none;隐藏元素后，该元素的高度，宽度，边距等空间都会擦除掉，导致页面的重排；而如果使用visibility: hidden;来隐藏元素后，该元素占用的空间依然会存在于页面中，只是对于用户来说是透明而已。

使用visibility属性设置元素的隐藏属性，并不能减少打开网页的速度，因为这个元素总是会随着页面一起下载。而通过display属性设置的却不一样，该元素相当于在页面中不存在，因此能够缩短页面加载时间。