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:hidden
the difference between Display:none and
There are three different points:
- Space occupies
- Reflow and rendering
- 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:none
is 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:hidden
It 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:0
And 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)