Display和Visibility的區別，你了解了嗎？
作者：青竹悅
當元素樣式設置為display：none時，則該元素和它的子元素都會隱藏，不占據文檔流（就是元素原本占據的空間會釋放出來）。
采用CSS實現元素隱藏的方法有很多種，比如定位到屏幕之外、透明度變換等。而常見的兩種方式是將元素設置為display:none或者visibility:hidden。
元素樣式設置為display:none
當元素樣式設置為display：none時，則該元素和它的子元素都會隱藏，不占據文檔流（就是元素原本占據的空間會釋放出來）。
給元素樣式設置display:none
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>樣式設置為
.a,.b,.c{
width:50px;
height:50px;
text-align:center;
background:blue;
margin-top:5px;
line-height:50px;
color:red;
}效果如：
圖片
添加display:none后效果如下：
圖片
B原本占據的空間會釋放出來。
display的其他常見屬性值及說明
屬性值 | 說明 |
block | 元素轉化為塊級元素顯示 |
inline | 元素轉化為行內元素顯示 |
inline-block | 自身元素轉化為行內元素，相鄰的行內元素顯示在一行，但其子元素為塊級元素顯示 |
元素樣式設置為：visibility:hidden
visibility:hidden也可以將元素隱藏，但是依然顯示著元素所占據的空間。如：
給元素樣式設置visibility:none
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>css樣式：
.a,.b,.c{
width:50px;
height:50px;
text-align:center;
background:blue;
margin-top:5px;
line-height:50px;
color:red;
}
.b{
visibility:hidden;
}效果如下：
圖片
visibility的其他屬性值：
屬性值 | 說明 |
inherit | 繼承父元素的visibility屬性設置 |
visible | 默認值 |
責任編輯：武曉燕
來源：
讀心悅
