display:none視為不存在且不加載，即，不為被隱藏的物件保留其物理空間，即該物件在頁面上徹底消失。
visibility:hidden隱藏，但在瀏覽時保留位置，即，使物件在網頁上不可見，但該物件在網頁上所佔的空間並沒有改變。
使用display:none屬性後，HTML元素（物件）的寬度、高度等各種屬性值都會「遺失」;
而使用visibility:hidden屬性後，HTML元素（物件）只是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。也即是說它仍具有高度、寬度等屬性值。
程式碼示範：
表格初始狀態：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title></head><body>
<table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">
<tr>
<td>A1 </td>
<td>A2 </td>
</tr>
<tr>
<td>B1 </td>
<td>B2 </td>
</tr>
</table></body></html>效果如下：
<html> <head> <title>display:none和visible:hidden的区别</title> </head> <body > <span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br /> <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span> </body> </html>
以上是css中關於display:none與visible:hidden的具體差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
