スペースを取らずにCSS内の要素を非表示にする方法-フロントエンドQ&A-php.cn

スペースを取らずにCSS内の要素を非表示にする方法

青灯夜游

リリース： 2022-06-01 19:34:40

オリジナル

5175 人が閲覧しました

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

スペースを取らずにCSS内の要素を非表示にする方法

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

#スペースを取らずに CSS で要素を非表示にする 2 つの方法

#方法 1: 表示属性を使用する

display:none;

スタイルを要素 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .display{ display:none; } </style> </head> <body> <div>正常显示元素</div> <div class="display">隐藏元素</div> <div>正常显示元素</div> </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div>

##手順: スペースを取らずにCSS内の要素を非表示にする方法

display: none に設定するだけです。

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

方法 2:position 属性と top 属性を使用する

position:Absolute;top: -9999px;

スタイルを要素に追加するだけです

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

ログイン後にコピー

説明: スペースを取らずにCSS内の要素を非表示にする方法