display: none 与 visibility: hidden 的区别

当我们想要隐藏一个元素时，通常会用display: none; 或者 visibility: hidden; 来设置元素。但实际上，两者还是有十分明显的区别。

简单来说：

    visibility: hidden 为 ：隐藏对应的元素并且挤占该元素原来的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
    display: none 为 ：隐藏对应的元素但不挤占该元素原来的空间。也就是说，该元素彻底消失。

所以，通常来说，使用visibility:hidden比display:none性能上要好。因为display:none的元素隐藏后不占据额外空间，状态切换会产生回流和重绘，而visibility:hidden的元素虽然隐藏了，但它们仍然占据着空间，它的状态切换只会引起页面重绘。