CSSコントロールのdiv表示・非表示方法と2つの方法の比較 元コード transfer_html/css_WEB-ITnose

http://blog.csdn.net/czf164 より転載

"

CSS での表示と可視性

CSS での表示と可視性の構文は、HTML 要素を非表示にしたり表示したりすることができます。非常に優れているようです。同様に、非常に多くの人が依然として間違いを犯しています。
属性は次のとおりです:

display:none|block;
display:none; 正確には、ブラウザ内の要素を削除し、占有しません。画面のスペース。その下に他の要素がある場合は、このスペース領域に移動します（たとえば、テーブルの上に100ドルがあります。今、それを引き出しに入れて隠しています。）テーブルに置かれた 100 ドルは他の場所に置くことができます)。
dispaly:block; 別の要素がスペースを占有している場合、そのスペースは下に移動し、元の要素が再び占有します。もう一度引き出しから 100 元を取り出します)

visibility: hidden|visible;
visibility:hidden; 要素を非表示にします。この時点ではまだそのスペースを占めています。 (テーブルの上に 100 元があります。これは私がカバーしたものです。テーブル クロスで彼を隠します。お金はまだそこにあります)
visible:visible 要素を表示します (テーブル クロスを外すと 100 元が表示されます)

しましょう。コードの例を示します。

rrree

ボックス内のコードを実行すると、testD が非表示になると、内部のすべてのボックスが非表示になり、その下の divV とボタンが上に移動することがわかります。 divV は非表示であり、彼だけが非表示になっています。内部の他の要素は非表示ではありません (ここで重要なのは、内部の div 要素の style 属性を表示および表示に設定することです。これを削除すると、非表示になります。 、ボタンはまだ上に移動しません。試してみてください。)

」