CSS 属性の表示と Visibility_html/css_WEB-ITnose の違いを明確にするためのコード

CSS で DOM 要素を非表示にしたい場合は、display 属性を none に設定するか、visibility 属性を hidden に設定するかの 2 つの方法があります。以下の HTML コードは、表示属性と可視性属性を設定しません。

<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">	<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">	</div>	<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">	</div></div>

use display:none to hidden outB

<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">	<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;display:none;">	</div>	<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">	</div></div>

Use Visibility:hidden to hidden outB

<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">	<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;visibility:hidden;">	</div>	<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">	</div></div>

結果を比較すると、簡単に結論を導き出すことができます。display:none を使用すると、要素は実際にから削除されます。ページの背後にある要素は自動的に上に移動します。visibility:hidden は要素を非表示にするだけで、要素が占有するページ領域はそのまま残ります。

outB 要素について、表示と可視性を組み合わせると結果はどうなりますか?

display:block;visibility:hidden; outB は非表示ですが、それでもページ領域を占有します。

display:none;visibility:hidden; outB は非表示であり、ページ領域を占有しません。

display:none;visibility:visible; outB は非表示であり、スペースを占有しません。

display:block;visibility:visible; outB は表示され、確実にスペースを占有します。

上記のテスト結果は、IE11/FF17/Chrome39 で一貫しています。