CSSのdisplay:noneとvisible:hiddenの具体的な違いの詳細な説明-CSSチュートリアル-php.cn

CSSのdisplay:noneとvisible:hiddenの具体的な違いの詳細な説明

黄舟

リリース： 2017-07-24 10:36:33

オリジナル

2248 人が閲覧しました

display:none は存在せず、ロードされていないものとして扱われます。つまり、物理スペースが非表示オブジェクト用に予約されていません。つまり、オブジェクトがページから完全に消えます。

visibility:hidden 非表示にしますが、閲覧時の位置は保持されます。つまり、オブジェクトが Web ページ上で非表示になりますが、Web ページ上でオブジェクトが占めるスペースは変わりません。

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>

ログイン後にコピー

効果は次のとおりです:

style="max-width:90%" をテーブルの 2 行目の tr に追加した後:

表の 2 行目の tr に style="max-width:90%" を追加した後:

display:none とvisible:hidden はどちらも Web ページ上の要素を非表示にできますが、 2 つの違いは次のとおりです。

display :none --- 非表示のオブジェクト用に物理スペースを予約しません。つまり、オブジェクトはページから完全に消えます。平たく言えば、見ることも触れることもできません。

visible:hidden--- Web ページ上でオブジェクトを非表示にしますが、Web ページ上でオブジェクトが占めるスペースは変化しません。平たく言えば、それは見ることはできませんが、触れることはできることを意味します。

例:

<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 中国語 Web サイトの他の関連記事を参照してください。