A piece of code shows the differences between the display and visibility attributes of CSS, as well as the visible conditions of dom elements, and the visibilitydom

A piece of code shows the differences between the display and visibility attributes of CSS, as well as the visible conditions of dom elements, and the visibilitydom

To hide a DOM element, CSS can set the display attribute to none or the visibility attribute to hidden.

1. The display and visibility attributes are not set.

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

2. Use display: none to hide outB. The outA and outC styles remain unchanged.

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

 

3. Use visibility: hidden to hide outB. The outA and outC styles remain unchanged.

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

 

The comparison results can easily draw a conclusion:

Display: none, the elements are actually removed from the page, and the elements behind it are automatically moved up;

Visibility: hidden, only this element is hidden, and the page space occupied by it still exists.

 

What is the result of combining display and visibility for the outB element?

Display: block; visibility: hidden; outB is invisible, but still occupies the 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 visible, certainly occupies space.

The above test results are consistent in IE11, FF17, and Chrome39. You can see:If one dom element is visible, the display attribute cannot be none,The visibility attribute cannot beHidden.

<div style="display:none;"><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></div>

When the browser runs this code, it can be found that outA, outB, and outC are invisible because the display attribute of the parent element is set to none. So If an element is visible, its parent element must also be visible..

In summary, if an element is visible, three conditions must be met: display cannot be none, visibility cannot be hidden, and parent element is visible.