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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

黄舟

Jul 24, 2017 am 10:36 AM

displayvisible

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="display:none" をテーブルの 2 行目の tr に追加した後:

表の 2 行目の tr に style="visibility:hidden" を追加した後:

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

「CSS4」アップデートApr 11, 2025 pm 12:05 PM

私が最初にCSS4¹のことを鳴らしたので、それについてもっと多くの議論がありました。私はここで他の人から私のお気に入りの考えをまとめようとしています。がある

3種類のコードApr 11, 2025 pm 12:02 PM

新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います

HTTPSは簡単です！Apr 11, 2025 am 11:51 AM

私は、httpsの複雑さを公に嘆きながら罪を犯しました。過去に、私はサードパーティのベンダーからSSL証明書を購入し、問題がありました

HTMLデータ属性ガイドApr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

JavaScriptの不変性を理解するApr 11, 2025 am 11:47 AM

JavaScriptの不変性を以前に作業したことがない場合は、変数を新しい値または再割り当てに割り当てることと混同しやすいことがわかります。

最近、カスタムチェックボックス、ラジオボタン、トグルスイッチを構築することは完全に可能です。必要でさえありません

脚注文字Apr 11, 2025 am 11:34 AM

脚注に最適な特別なスーパーセット番号の文字があります。ここにあります：

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか？そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。