CSSでdivを非表示にする方法

CSS で div を非表示にする方法: 1. "display:none" で div を非表示にする; 2. "visibility:hidden" で div を非表示にする; 3. "opacity:0" で div を非表示にする。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

CSS で div を非表示にするには?

CSS で Div を非表示にする 3 つの方法

CSS の表示属性と可視性属性を使用して、div レイヤーを含む HTML 要素を非表示にしたり表示したりできます

1:

display:none|block
display:none

ファイルの HTML を非表示にします。正確に言うと、この要素はブラウザ内で透明であり、画面スペースを占有しません。その下に他の要素がある場合は、スペース領域に移動されます。

display:block

非表示の HTML 要素を表示

別の要素がスペースを占有している場合、その要素は下に移動します。

スペースは再び元の要素によって占有されます

Two:

visibility:hidden|visible
visibility:hidden

要素を非表示にします。実際には非表示にしますが、それでもスペースが占有されます

visibility:visible

要素を表示させます

要素の可視性属性が設定されている場合一般要素の場合、その動作は非表示と同じです。

1.Chrome では、折りたたみ値を使用する場合と非表示を使用する場合に違いはありません。

2. Firefox、Opera、IE では、collapse 値を使用する場合と、display: none を使用する場合に違いはありません。

3:

opacity:0

opacity 属性 要素の透明度は誰もが知っていると思いますが、要素の透明度を 0 に設定すると、要素はユーザーの目にも隠されます。これは要素を非表示にする方法とみなされます。このメソッドと Visibility:hidden の共通点の 1 つは、要素が非表示になった後もスペースを占有することですが、透明度を 0 に設定した後は要素が非表示になるだけで、ページ上にまだ存在することは誰もが知っています。

つまり、display 属性と Visibility は、それぞれ HTML 要素が存在するかどうか、およびそれが表示されるかどうかを制御します

display 属性は、要素が存在するかどうかを定義します

Visibility 属性は、制御するだけです要素が実際に表示されているかどうかはまだ存在します

不透明要素は非表示ですが、ページ上にはまだ存在します

[推奨学習: css ビデオ チュートリアル]

以上がCSSでdivを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。