The difference between several methods of CSS hidden elements (display,visibility)

In CSS, there are many ways to hide an element (meaning invisible to the naked eye), some occupy space, some do not occupy space, some can respond to clicks, and others cannot respond to clicks.

{display:none;/* Do not occupy space, cannot click */} {Visibility:hidden;/* Occupy space, cannot click */} {position:absolute; top: -999em;/* Do not occupy space, cannot click */} {position:relative; top: -999em;/* Occupy space, cannot click */} {position:absolute; visibility:hidden;/* Do not occupy space, cannot click */} {height:0; overflow:hidden;/* Do not occupy space, cannot click */} {opacity:0; Filter:alpha (opacity=0);/* occupy space, you can click */} {position:absolute; opacity:0; Filter:alpha (opacity=0); */* Do not occupy space, you can click */} {    zoom:0.001;    -moz-transform:scale (0);    -webkit-transform:scale (0);    -o-transform:scale (0);    Transform:scale (0);    /* IE6/IE7/IE9 not occupy space, ie8/firefox/chrome/opera occupy space. Can not click */}{    position:absolute;    zoom:0.001;    -moz-transform:scale (0);    -webkit-transform:scale (0);    -o-transform:scale (0);    Transform:scale (0);    /* Do not occupy space, cannot click */}

visibility:hiddenthe difference between Display:none and

There are three different points:

1. Space occupies
2. Reflow and rendering
3. Implicated Sex

1th, must all know;

2nd, the display:none hidden generation of Reflow and repaint (Reflow and repainting), without visibility:hidden this effect on the front-end performance problems;

The 3rd estimate is that many peers do not know, is the "implicated sex" aspect of the difference.

The so-called "implicated", that is, if the ancestral elements encounter a scourge, their descendants will suffer without exception. I suddenly think of the "Earth Strikes Back" or "The Mummy of the Scorpion King", once the mother crippled, junior Ah, subordinates ah what are instantly disappear. display:noneis the obvious statement of "implicated sex": Once the parent node element is applied display:none , the parent node and its descendant node elements are all invisible, and no matter how unyielding the descendants ' elements struggle.

In real-world web applications, we often implement some of the hidden features of the display, and because display:none of our own features and the potential drivers of jquery, we are display:none quite familiar with this hidden feature. As a result, there will be strong emotional awareness over time, and it cannot be avoided to migrate this knowledge to other similar performance attributes (eg. visibility ) Knowledge, plus some conventional experience ...

For example, in general, we apply a parent element visibility:hidden , and its descendants will all be invisible. Thus, we will have a similar understanding of migration: The application visibility:hidden of the declaration of the descendants of the elements how unyielding struggle will not be able to escape the invisible and obliterated fate. In fact, there are hidden "failure" situations.

When do I hide "fail"? Very simple, if the descendants of the elements of the application visibility:visible , then the descendants of the elements will be Liu Qian-like appearance.

Comparison Summary:

Display:none is a rather inhuman statement that all children are killed (implicated), and that even the place of burial is not left (no space), causing the public outcry (rendering and reflux).

visibility:hiddenIt has humanitarian concern, although must kill descendants, but descendants can be avoided by certain means (pseudo-implicated sex), and after the death of the whole body, cemetery (occupy space), the domestic people more indifferent (no rendering and reflux).

Combination of height:0 and Overflow:hidden

Overflow:hidden in Chinese understanding is "overflow hidden", that is, the contents of the box is not visible. Plus height:0 , as long as it is a normal non-inline horizontal element, all descendants within the element should be invisible.

height:0And the overflow:hidden combination hides the condition of "fail" as follows: The ancestor element is not position:relative/absolute/fixed declared, and the inner child element applies the position:absolute/fixed declaration.

The difference between several methods of hiding elements in CSS (display,visibility)