CSS 元素隱藏
在CSS中，可以對(duì)元素進(jìn)行隱藏，與隱藏相關(guān)的屬性是visibility。它規(guī)定元素是否可見，其屬性值可以是以下幾種：
?visible：默認(rèn)值，元素是可見的。
?hidden：元素是不可見的。
?collapse：當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì)影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他元素上，會(huì)呈現(xiàn)為“hidden”。
?inherit：規(guī)定應(yīng)該從父元素繼承visibility屬性的值。請(qǐng)使用“display”屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素。
在這里要提醒大家的是，如果使用了隱藏的值將元素進(jìn)行隱藏，元素會(huì)變得不可見，但是其原來占有的物理空間是不會(huì)變動(dòng)的。也就是說，元素雖然隱藏了，但是還是確確實(shí)實(shí)占有原來的物理空間。
可以在頁面中設(shè)置三個(gè)div,然后為它們添加寬、高、邊框等屬性，然后將其中一個(gè)隱藏，已達(dá)到隱藏元素但是不刪除元素的目的。
【例題】隱藏元素
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border:2px red solid;
background:
}
.d1{background: pink;}
.d2{background: lightblue;}
.d3{background: yellowgreen;}
</style>
</head>
<body>
<div></div>
<div class="d2 hidden"></div>
<div></div>
</body>
</html>
這時(shí)，三個(gè)div都是正常顯示出來的，下面對(duì)第二個(gè)div進(jìn)行隱藏，看看會(huì)有什么變化，代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border:2px red solid;
background:
}
.d1{background: pink;}
.d2{
background: lightblue;
visibility: hidden;
}
.d3{background: yellowgreen;}
</style>
</head>
<body>
<div></div>
<div class="d2 hidden"></div>
<div></div>
</body>
</html>
從代碼的運(yùn)行結(jié)果可以看出，第一個(gè)和第三個(gè)div都是正常顯示，并且它們的位置也沒有變動(dòng)。而第二個(gè)div使用了visibility屬性之后本身還是存在，原來的位置只是被隱藏起來而已。
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>