CSS elements that you may not know are hidden "dead" for their magical use

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=2191

First, CSS elements hidden

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. After Hong--one by one to look at.

/* Do not occupy space, cannot click */}

/* Occupy space, cannot click */}

/* Do not occupy space, cannot click */}

/* Do not occupy space, cannot click */}

/* Occupy space, cannot click */}

/* Do not occupy space, cannot click */}

/* Do not occupy space, cannot click */}

/* Occupy space, you can click */}

/* 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. cannot be clicked */}

{    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 */}

Welcome to add!

The above hidden method if the child element of the minimum generation (no children at the bottom of the knee), such as the picture element, the above comment description is ok (if wrong, please correct me).

As I have mentioned before, for the sake of understanding, we will use emotional thinking, the analogy of reality, in the heart to form only their own image of the idea. This is OK, but, you know, things are two-sided, something that is easy to let us into a fixed mode of thinking, especially in the real world of non-special circumstances of the verification, so that we inadvertently produce some wrong understanding.

The above words are a bit like the old fritters--hard to chew. To make it easy for young and old to understand, just give a few simple examples. The example here is a few hidden examples: due to the fixed thinking of the image, you may not know the following CSS elements to hide the "invalid" situation!

Ii. Display:none and Visibility:hidden

I remember when the campus recruitment, technical side when asked me display:none and visibility:hidden the difference between?

"Is this a simple question?" "I am secretly proud of my heart, according to withstand their own proud and nervous small heart, confidently said," These two statements can make elements hidden, the difference is that the display:none hidden elements do not occupy any space, and visibility:hidden the hidden element space still exists. ”

Think about it, I am really impetuous point. This level of answer shows that your accomplishments in HTML/CSS are only an understanding of this level and will not allow the interviewer to shine. Looking across China, how many people write pages, such as the extent of the answer to the person must be like the sand in the river, a catch a lot. Casually with the toe to think also know, like Degree Niang, Penguin Company spends so much manpower and financial resources to the campus is sure to pick gold, humble sand Let it drift, flow to the sea warm fossil go.

At present, I know the difference has three points (Welcome to add):

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

1th, it must be known; 2nd I have previously mentioned that the display:none hidden production of reflow and repaint (Reflow and repainting), without visibility:hidden this effect on the front-end performance of the problem; 3rd estimate is not known to many peers, is the "implicated" 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.

You can click here: Implicated of CSS visibility Properties test Demo

Isibility is a property of such a funny.

Comparison Summary: display:none It is a rather inhuman statement that all future generations are dead (implicated), and that even the place where they are buried is not left (without space), causing a 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).

attached to the end of this section, you can click here: Display:none implicated Test demo

You can see the demo page of the Beautiful girls have been with the handsome Valentine's Day.

Third, visibility hidden "failure" magical

Visibility hidden "Failure" of the application in fact, in the long time there, wait, let me find ~ ~

Aha, I found it. Last May CSS3 simulated window7 Cool Interface effect demo, the original text click here.

check boxes are checked or not, and the corresponding sections are displayed and hidden. For example, let's leave the rounded corners of the parent tag, the projection, the background, or whatever, leaving only the text box inside. How to do it? If it is display:none , then the inside of the text box will also be erased, if you want to script control style, wow Oh, so many styles, think of the big head. There is no doubt that the use visibility of control here is the most efficient and the most ingenious method.

Iv. combination of height:0 and Overflow:hidden

overflow:hiddenIn 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. This is an image of our understanding, and N-much empirical proof is true, but is it really like this?

First look at a counter-example demo, you can click here: 0 height overflow hidden "fail" Demo

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.

why is that? let's look at a little explanation of overflow in the CSS2.1 specification:

This property specifies whether content of a block container element was clipped when it overflows the element ' s box. It affects the clipping of the element ' s content except any descendant elements (and their respective content and D Escendants) whose containing block is the viewport or an ancestor of the element.

What do you mean? I pondered and pondered, alas, only sigh understanding not deep enough, also some reason unclear. I think the general meaning should be like this (if there is no wrong should correct): overflow can be clipped beyond the block element elements. Unless the containing block beyond the element is the entire viewport or the ancestor element of the overflow element. The containing block of the absolutely positioned element should then be position:relative/absolute/fixed the ancestor element that contains it.

So:

Body    height:0; overflow:hidden;        / * will not be hidden * /

position:relative;    height:0; Overflow:hidden;        / * will not be hidden * /

height:0; Overflow:hidden;  position:relative;    / * will be hidden * /

height:0; Overflow:hidden;    position:relative;        / * will be hidden * /

Remember this: When an element overflows an element, position: absolute overflow: hidden It is not hidden if its first position static ancestor element (except for the exception) body is an element ancestor element, otherwise it is overflow: hidden hidden.

Or remember this: The Martians have triggered the law on Earth, and if the Martians ' father is outside this law, then the Martians have nothing; otherwise, go to jail!

Five, height:0 and Overflow:hidden "failure" magical

Not long ago in the article "absolute elements in the alignment display under the Text-align attribute", a simple method of using text-align properties to implement the "Return Top" button was described.

You can really click here: text-align:right declaration under the return top position demo

Later some people reflect that this method is good, but there is a problem, because the label inside a   space, resulting in a blank height Ah!

How to fix the height of the space generated here? Use line-height: 0; ? or use font-size: 0; ? If it is not because line-height and font-size has inheritance, this is really a good way (Font-size and chrome default text can not be less than 12 pixels, the archaeological version of IE under 0 pixel text presents a small point of the problem).

After my multi-test, in the OOCSS development model, here height:0 is the overflow:hidden best way to use and.

H0 OVH tr      ABS

You can ruthlessly click here: Text-align under return top does not occupy space demo

In the demo, one of the above strips   has a height, so the head background color, and the following is not. Because the positioning element is absolutely positioned, do not worry about being overflow accidentally killed!

CSS elements that you may not know are hidden "dead" for their magical use