区别分析

首先我们都知道，display: none 和 visibility: hidden 都可以起到隐藏元素的功能

两者的区别在于占用文档流的不同

display: none 隐藏元素同时去除元素在文档流所占的空间

visibility: hidden 隐藏元素, 但不去除元素在文档流所占的空间

区别示例

HTML Code

<span class="one">第一区域</span>
<span>第二区域</span>
<br /><br />
<span class="three">第三区域</span>
<span>第四区域</span>

CSS Code

span {
    background-color: black;
    padding: 5px;
    color: #fff;
}
.one {
    display: none;
}
.three {
    visibility: hidden;
}

结果示图

从上图中，可以看出

使用 display: none 的第一区域，在当前 HTML 中已经没有占用文档流了

使用 visibility: hidden 的第三区域，依然占用了文档流