CSSでdivを非表示にする方法-CSSチュートリアル-php.cn

CSSでdivを非表示にする方法

青灯夜游

リリース： 2023-01-05 16:10:08

オリジナル

9388 人が閲覧しました

div を非表示にする CSS メソッド: 1. "display:none;" ステートメントを使用します; 2. "visibility:hidden;" ステートメントを使用します; 3. "opacity:0;" ステートメントを使用します; 4. 「position :absolute;top:-9999px;」ステートメントを使用します。

CSSでdivを非表示にする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

普段Webサイトをレイアウトする際にdivを非表示にしたいのですが、cssでdivの表示・非表示を制御する方法がわからない人も多いのではないでしょうか？ CSSでdivを非表示にする方法を解説します。

1. display:none; を使用して div を非表示にします

display:none 属性を使用して、テキストを含むすべての情報を非表示にできますそして写真。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--display:none</title>
        <style>
            .display{
                display:none;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="display">隐藏元素</div>
        <div>正常显示元素</div>

    </body>
</html>

ログイン後にコピー

CSSでdivを非表示にする方法

説明:

このメソッドはスペースを占有せず、要素を非表示にするため、この属性を動的に変更すると再配置 (ページレイアウトの変更) が発生します。ページから要素を削除すると理解できます。要素は子孫には継承されませんが、その子孫は表示されません。結局、それらはすべてまとめて非表示になります。

2. visibility: hidden;hide div

visibility 属性を使用して、要素が表示されるかどうかを指定します。

この属性は、要素によって生成される要素ボックスを表示するかどうかを指定します。これは、要素がまだ元のスペースを占めていますが、完全に非表示になる可能性があることを意味します。値の折りたたみは、テーブルレイアウトから列または行を削除するためにテーブルで使用されます。

属性値:

表示されるデフォルト値。要素が表示されます。
#隠し要素は表示されません。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--visibility: hidden</title>
        <style>
            .visibility{
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="visibility">隐藏元素</div>
        <div>正常显示元素</div>

    </body>
</html>

ログイン後にコピー

CSSでdivを非表示にする方法

手順:

このメソッドでは、要素は非表示になりますが、消えることはなく、スペースを占有したままになります。非表示にした後、HTML の元のスタイルは変更されません。

は子孫に継承され、visible:visible;;

はバインドされたイベントをトリガーしません。 element に対して、このプロパティを動的に変更すると再描画が発生します。

(学習ビデオ共有:

css ビデオチュートリアル)

3. opacity: 0hide div を使用します。

opacity 属性は、要素の透明度を設定することを意味します。要素の境界ボックスを変更するようには設計されていません。

これは、不透明度を 0 に設定すると、要素が視覚的に非表示になるだけであることを意味します。要素自体は引き続き独自の位置を占め、Web ページのレイアウトに貢献します。これは、上記の「visibility: hidden」に似ています。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--opacity: 0</title>
        <style>
            .opacity{
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="opacity">隐藏元素</div>
        <div>正常显示元素</div>

    </body>
</html>

ログイン後にコピー

レンダリング:

CSSでdivを非表示にする方法 ##説明:

このメソッドでは、透明度は 100% にのみ設定され、要素は非表示になります。依然としてスペースを占有します。非表示にしても元の HTML スタイルは変更されません。

は子要素に継承され、子要素は opacity=1 によって再表示することはできません。

# を持つ要素opacity:0 は引き続きバインド済みイベントをトリガーできます。

position: ABSOLUTE;TOP: -9999px;

hide div

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--position: absolute</title>
        <style>
            .position{
                position: absolute;
				top: -9999px;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="position">隐藏元素</div>
        <div>正常显示元素</div>

    </body>
</html>

ログイン後にコピー

手順: を使用します。位置: 絶対的な場合、要素を非表示に設定する主な原則は、要素の上部を画面上で非表示にするのに十分な大きな負の数に設定することです。プログラミング関連の知識について詳しくは、プログラミングビデオをご覧ください。！以上がCSSでdivを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。