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