visibility:hidden和display:none的異同

liqingyu1995發表於2016-09-20
None

共同之處：visibility:hidden;和display:none;都是把部分內容隱藏；
不同之處：visibility:hidden；在使用它的時候，它雖然把不想要的內容隱藏了，但是它佔用物理空間，還有就是在瀏覽器載入時，會保留它原來的物理位置，但是沒有內容
                display:none;它是徹底的隱藏，它不佔用物理空間，在瀏覽器載入的時候它不參與載入，不保留原來的物理空間。

下面是它的驗證程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility:hidden和display:none;的異同</title>
<style>
#area{
width:400px;
height:400px;
background:green;
}
tr{
color:white;
background:purple;
}
</style>
</head>
<body>
<div id="area">
<table border="1" style="width:400px;
height:200px;">
<tr>
<td>1</td>
<td style="display:none;">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td style="visibility:hidden;">5</td>
<td>6</td>
</tr>
</table>
</div>
</body>
</html>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/30211155/viewspace-2125186/，如需轉載，請註明出處，否則將追究法律責任。

相關文章