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

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

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

ppskdkad

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

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

これは 2 番目の div の可視性です:hidden は要素を非表示にするだけですが、レイアウトを占有します

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

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

これは 3 番目の DIV 表示です。どれもレイアウトに影響しません。

そうでない場合は確認してください。信じてください

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

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

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

Look

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