How can I make an element invisible through CSS? (Interview questions), css interview

How can I make an element invisible through CSS? (Interview questions), css interview

When I saw this problem during the interview, I thought it was not comprehensive. I will sort it out and study it together:

I. Hide CSS Elements 
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. One by one.

The Code is as follows:

{Display: none;/* does not occupy space, you cannot click */}/********************************** **************************************** * *****/{visibility: hidden;/* occupies space, you cannot click */}/********************************** **************************************** * *****/{position: absolute; top:-999em;/* does not occupy space, you cannot click */}/********************************** **************************************** * *****/{position: relative; Top:-999em;/* occupies space, you cannot click */}/********************************** **************************************** * *****/{position: absolute; visibility: hidden;/* does not occupy space, you cannot click */}/********************************** **************************************** * *****/{height: 0; overflow: hidden;/* does not occupy space, you cannot click */}/********************************** **************************************** * *****/{opacity: 0; filter: Alpha (opacity = 0);/* occupies space, you can click */}/********************************** **************************************** * *****/{position: absolute; opacity: 0; filter: Alpha (opacity = 0);/* does not occupy space, you can click */}/********************************** **************************************** * *****/{zoom: 0.001;-moz-transform: scale (0);-webkit-transform: scale (0);-o-transform: scale (0); transform: sca Le (0);/* IE6/IE7/IE9 does not occupy space, while IE8/FireFox/Chrome/Opera occupies space. You 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 */}

Ii. display: none and visibility: hidden
Currently, there are three differences I know (please add ):
1. space occupation (display: none does not occupy space, and visibility: hidden still occupies space .)
2. display: none hides and generates reflow and repaint (backflow and re-painting), while visibility: hidden does not affect front-end performance .)
3. Connection

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. Display: none is an explicit statement of "inter-dependency": Once the parent node element applies display: none, all elements of the parent node and its child nodes are invisible, and no matter how unyielding the child element is, it will not help.
In actual web applications, we often need to implement some hide and show functions. Because of the display: none feature and jQuery's potential drivers, we need: none is a well-known hidden feature. Therefore, over time, a strong emotional understanding will be formed, and it cannot be avoided to migrate this understanding to other similar performance attributes (eg. visibility), coupled with some conventional experience ......
For example, if we apply visibility: hidden to a parent element, the child and child will be invisible. As a result, we will have a similar understanding of migration: the visibility of the application: the descendant elements under the hidden statement cannot undo from the invisible fate of being erased. In fact, there is a situation where "invalid" is hidden.
When to hide "invalid "? It is very simple. If the descendant element applies visibility: visible, then this descendant element will appear again like Liu Qian.
 
Visibility is such a funny attribute.
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 ), the Chinese people are relatively indifferent (no rendering and Backflow ).