CSS 元素隱藏
在CSS中，可以對元素進(jìn)行隱藏，與隱藏相關(guān)的屬性是visibility。它規(guī)定元素是否可見，其屬性值可以是以下幾種：
?visible：默認(rèn)值，元素是可見的。
?hidden：元素是不可見的。
?collapse：當(dāng)在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他元素上，會呈現(xiàn)為“hidden”。
?inherit：規(guī)定應(yīng)該從父元素繼承visibility屬性的值。請使用“display”屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素。
在這里要提醒大家的是，如果使用了隱藏的值將元素進(jìn)行隱藏，元素會變得不可見，但是其原來占有的物理空間是不會變動的。也就是說，元素雖然隱藏了，但是還是確確實實占有原來的物理空間。
可以在頁面中設(shè)置三個div,然后為它們添加寬、高、邊框等屬性，然后將其中一個隱藏，已達(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>
這時，三個div都是正常顯示出來的，下面對第二個div進(jìn)行隱藏，看看會有什么變化，代碼如下:
<!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>
從代碼的運行結(jié)果可以看出，第一個和第三個div都是正常顯示，并且它們的位置也沒有變動。而第二個div使用了visibility屬性之后本身還是存在，原來的位置只是被隱藏起來而已。
湘公網(wǎng)安備:43011102000856號 
點擊加載更多評論>>