A piece of code to clarify the difference between CSS attributes display and visibility_html/css_WEB-ITnose

If you want to hide a DOM element with CSS, there are two methods: set the display attribute to none, or set the visibility attribute to hidden. The html code below does not set the display and visibility attributes.

<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 hide 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 hide 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>

Comparing the results, it is easy to draw the conclusion: with display:none, the element is actually removed from the page, and the elements behind it will automatically move up; while visibility:hidden only hides the element, it The page space occupied still exists.

For the outB element, what will be the result if display and visibility are combined?

display:block;visibility:hidden; outB is invisible, but still takes up page space.

display:none;visibility:hidden; outB is invisible and does not occupy page space.

display:none;visibility:visible; outB is invisible and does not occupy space.

display:block;visibility:visible; outB is visible and definitely takes up space.

The above test results are consistent under IE11/FF17/Chrome39.