{display: none; /* Does not occupy space, cannot click*/}
{visibility: hidden; /* Occupies space, cannot click*/}
{position: absolute; top: -999em; /* Does not occupy space, cannot click* /}
{position: relative; top: -999em; /* Occupies space, cannot click*/}
{position: absolute; visibility: hidden; /* Does 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 does not take up space, IE8/FireFox/Chrome/Opera takes up space. Can't 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 , Can’t click*/
}
The difference between display: none and visibility: hidden
There are three differences:
- Space occupation
- Reflow and rendering
- Strain
The first point, I must all know;
The second point is that display:none hides to generate reflow and repaint (reflow and repaint), while visibility: hidden does not have this problem that affects front-end performance;
The third point is estimated to be unknown to many peers, and that is the difference in "connectivity".
The so-called "connectivity" means that if an ancestor element encounters a certain scourge, its children and grandchildren will suffer without exception. I suddenly remembered "Earth Strikes Back" or "The Scorpion King of the Mummy". Once the mother is lame, the juniors, subordinates, etc. vanish in an instant. display:none is an obvious statement of "connectivity": once display:none is applied to the parent node element, the parent node and its descendant node elements are all invisible, and no matter how unyielding its descendant elements struggle, it will not help.
In actual web applications, we often need to implement some display and hidden functions. Due to the characteristics of display:none and the potential driver of jQuery , we are quite familiar with the hidden features of display:none. Therefore, over time, a stronger emotional understanding will be formed, and it is inevitable to transfer this understanding to other understandings of similar performance attributes (eg. visibility), plus some conventional experience...
For example, under normal circumstances, if we apply visibility:hidden to a parent element, all its descendants will be invisible. As a result, we will have a similar migration of understanding: no matter how unyielding the descendant elements under the visibility: hidden statement are applied, they will not be able to escape the fate of being invisible and obliterated. In fact, there are hidden "failures".
When to hide "failure"? It's very simple. If visibility:visible is applied to the descendant element, then the descendant element will appear again like Liu Qian.
Comparison summary:
display:none is a very inhumane statement. All future generations are killed (associated), and there is no place for burial (no space), causing an uproar among the people (exaggeration and return).
visibility: hidden has humanitarian care. Although it is necessary to kill offspring, offspring can be avoided by certain means (pseudo-association), and after death, the corpse is complete, the cemetery is complete (occupies space), and the domestic people are relatively indifferent (no exaggeration and return) ).
Combination of height:0 and overflow:hidden
Overflow: hidden in Chinese means "overflow hidden", that is, the content outside the box is clicked and invisible. With height:0, as long as it is a general non-inline horizontal element, all descendants inside the element should be invisible.
The conditions for the combination of height:0 and overflow:hidden to hide "invalidity" are as follows: the ancestor element has no position:relative/absolute/fixed declaration, and the internal child element has a position:absolute/fixed declaration applied.