css中display:none和visibility:hidden的區別

區別分析

首先我們都知道，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 的第三地區，依然佔用了文檔流
結果示圖