Differences between several types of hidden HTML in HTML

In CSS, there are many ways to hide elements (invisible to the naked eye within the screen), some occupy space, some do not occupy space, some can respond to clicks, and some cannot respond to clicks.

{Display: none;/* does not occupy space. You cannot click */}
{Visibility: hidden;/* occupies space and cannot be clicked */}
{Position: absolute; top:-999em;/* does not occupy space and cannot be clicked */}
{Position: relative; top:-999em;/* occupies space and cannot be clicked */}
{Position: absolute; visibility: hidden;/* does not occupy space and cannot be clicked */}
{Height: 0; overflow: hidden;/* does not occupy space and cannot be clicked */}
{Opacity: 0; filter: alpha (opacity = 0);/* occupies space. You can click */}
{Position: absolute; opacity: 0; filter: alpha (opacity = 0);/* does not occupy space. Click */}
{
Zoom: 0.001;
-Moz-transform: Scale (0 );
-WebKit-transform: Scale (0 );
-O-transform: Scale (0 );
Transform: Scale (0 );
/* IE6/IE7/ie9 does not occupy space, while IE8/Firefox/Chrome/Opera does. Cannot click */
}
{
Position: absolute;
Zoom: 0.001;
-Moz-transform: Scale (0 );
-WebKit-transform: Scale (0 );
-O-transform: Scale (0 );
Transform: Scale (0 );
/* Does not occupy space and cannot be clicked */
}

Display: none andvisibility:hiddenDifference

 

There are three differences:

1. Space occupation
2. Backflow and rendering
3. Interconnectivity

The first point must be known;

Second,display:noneHide and generate reflow and repaint, whilevisibility:hiddenThere is no such problem affecting front-end performance;

The third estimation is that many colleagues do not know the difference in "inter-connection.

The so-called "interconnectivity" means that if the ancestor element encounters a certain harm, the Child and sun will suffer without exception. I suddenly remembered "Earth counterattack" or "Mummy's Scorpion King". Once the mother was destroyed, the young generation, subordinates, and everything instantly vanished.display:noneIs the explicit declaration of "inter-connection": Once the parent node element is applieddisplay:noneThe elements of the parent node and its child node are invisible, and no matter how unyielding the child element is, it does not help.

In actual Web applications, we often need to implement some hidden display functions.display:noneBecause of its own characteristics and jquery's potential driversdisplay:noneThis hidden feature is quite well known. Therefore, over time, a strong emotional understanding will be formed, and it is inevitable to migrate this understanding to other similar performance attributes (eg.visibilityIn addition to some conventional experience ......

For example, we usually apply a parent Elementvisibility:hidden, And all future generations are invisible. So we will have a similar understanding of migration: Applicationvisibility:hiddenHow can the descendant elements of the Declaration not be able to get rid of the invisible fate of being wiped out. In fact, there is a situation where "invalid" is hidden.

When to hide "invalid "? Very easy. If the child element is appliedvisibility:visible, Then this child element will appear again like Liu Qian.

 

Comparison summary:

Display: none is a terrible statement. All future generations are killed (in a single connection), and no space is left for burial ), as a result, the whole people will be stunned (rendering and Backflow ).
visibility:hiddenHowever, this is a humanitarian concern. Although we have no choice but to destroy our children and grandchildren, we can avoid them by some means (pseudo-connecting). In addition, after the death, the whole corpse and the cemetery (occupying space ), the Chinese people are relatively indifferent (no rendering and Backflow ).

 

Combination of Height: 0 and overflow: hidden

Overflow: hidden can be understood as "overflow and hiding" in Chinese, that is, contents outside the box are hidden and invisible. Addheight:0As long as it is a general non-inline horizontal element, all the children inside the element should be invisible.

height:0Andoverflow:hiddenThe conditions for hiding the "invalid" combination are as follows: the ancestor element does notposition:relative/absolute/fixedDeclaration, and the internal sub-elements are appliedposition:absolute/fixedStatement.