ホームページ > 記事 > ウェブフロントエンド > スペースを取らずにCSS内の要素を非表示にする方法
スペースを取らずにCSS内の要素を非表示にする方法
- 青灯夜游オリジナル
- 2022-06-01 19:15:405151ブラウズ
2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
#スペースを取らずに CSS で要素を非表示にする 2 つの方法
#方法 1: 表示属性を使用するdisplay:none;
スタイルを要素 <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>
##手順: 
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内の要素を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。