CSSに隠し要素を配置する方法-CSSチュートリアル-php.cn

CSSに隠し要素を配置する方法

青灯夜游

リリース： 2023-01-05 16:12:29

オリジナル

7155 人が閲覧しました

CSS プレースホルダーで要素を非表示にする方法: 1. 可視性属性を使用し、「visibility: hidden;」スタイルを要素に設定します。要素は非表示になっていますが、元のスペースを占有しています。2. 次を使用します。 opacity 属性では、要素に「opacity:0;」スタイルを設定するだけです。

CSSに隠し要素を配置する方法

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

方法 1: visibility: hidden;プレースホルダーを非表示にする

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に隠し要素を配置する方法

方法 2: opacity: 0 プレースホルダーを非表示にする

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に隠し要素を配置する方法