CSS中：display:none與visible:hidden的區別

時間 2019-11-18

標籤 css display visible hidden 區別欄目 CSS 简体版

原文原文鏈接

display:none視爲不存在且不加載，即，不爲被隱藏的對象保留其物理空間，即該對象在頁面上完全消失。html

visibility:hidden隱藏，但在瀏覽時保留位置，即，使對象在網頁上不可見，但該對象在網頁上所佔的空間沒有改變。spa

使用 display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;3d

而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。也便是說它仍具備高度、寬度等屬性值。code

代碼演示：htm

表格初始狀態：對象

<!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>