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