CSSを非表示にする4つの方法

1.opacity:0 は要素を非表示にするだけですが、依然としてレイアウトを占有しているため、レイアウトに影響します

<div class="div1">
snda:opacity:0 は要素を非表示にするだけですが、それでもレイアウトを占有するため、依然としてレイアウトに影響します
</div>
<p>ppskdkad</p>

.div1{
不透明度: 0;
幅:200px;
高さ:200px;
ボーダー:1px 赤一色;
}

2.visibility: hidden は要素を非表示にするだけですが、レイアウトを占有します

<div class="div2">
これは 2 番目の div の可視性です:hidden は要素を非表示にするだけですが、レイアウトを占有します
</div>
<p&gt ;効果を見てください</p>

.div2{
可視性: 非表示;
幅:200px;
高さ:200px;
境界線:1px 赤一色;
}

3.display:none はレイアウトに影響しません

<div class="div3">
これは 3 番目の DIV 表示です。どれもレイアウトに影響しません。
</div>
<p>そうでない場合は確認してください。信じてください</p>

.div3{
表示: なし;
幅:200px;
高さ:200px;
ボーダー:1px 赤一色;
}

4.position:absolute はレイアウトには影響しません

<div class="div4">
これは 4 番目の div です。レイアウトには影響しないと思いますが、一緒に見てみましょう。レイアウトのいずれか
</div>
<p>Look</p>

.div4{
位置: 絶対;
上:-9999px;
左:-9999px;
幅:200px;
高さ:200px;
境界:1px 実線赤;
}