區(qū)別:
visibility: hidden----將元素隱藏,但是在網(wǎng)頁中該占的位置還是占著助泽。
display: none----將元素的顯示設(shè)為無,即在網(wǎng)頁中不占任何的位置疼进。
例如有三個(gè)table定欧,將中間的一個(gè)table hidden掉,你會(huì)發(fā)現(xiàn)在那個(gè)被hidden的table看不見了责掏,但是,中間會(huì)留有很大的一空白湃望,而這個(gè)空白就是這個(gè)table沒有被隱藏時(shí)所占的位置
而none的作用更像是把元素從網(wǎng)頁中“去除”(當(dāng)然不是真的去除换衬,只是效果是如此)
例如有三個(gè)table痰驱,將中間的一個(gè)table none掉,你會(huì)發(fā)現(xiàn)在剩下的兩個(gè)table中間不會(huì)有任何的空白瞳浦。就好像中間的那個(gè)table從來不存在過一樣
2) visibility 是可繼承的担映。 display 是不可繼承的。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>visibility:hidden和display:none的區(qū)別</title>
</head>
<body>
<span style="visibility:hidden;background-color:red">隱藏區(qū)域</span>
<span style="background-color:blue">顯示區(qū)域</span>
<span style="display:none;background-color:red">隱藏區(qū)域</span>
<span style="background-color:blue">顯示區(qū)域</span>
</body>
</html>