CSS element hiding principles and effects Summary

Reprinted and adapted from: http: //www.zhangxinxu.com/wordpress/

A, CSS element hiding

In CSS, so that element hiding (refer to within the screen is not visible to the naked eye) a lot of ways, and some take up space, and some do not occupy space; some can respond to clicks, and some can not respond to clicks. One by one to see.

{ Run the display : none ; / * do not take up space, can not click * / }
 / * ******************************** ********************************************** * / 
{ visibility : hidden ; / * take up space, can not click * / }
 / * *********************************** ******************************************* * / 
{ position : Absolute ; Top : -999em ; / * do not take up space, can not click * / }
 / *************************************************** **************************** * / 
{ position : relative ; Top : -999em ; / * take up space, can not click * / }
 / * **************************** *********************************************************** * / 
{ position : Absolute ; visibility : hidden ; / * do not take up space, can not click * / }
 / * ********************************************** ******************************** * / 
{ height :0 ; overflow : hidden ; / * do not take up space, can not click * / }
 / * ******************************* *********************************************** * / 
{ Opacity : 0 ; filter : the Alpha (Opacity = 0) ; / * space occupied by click * / }
 / * *************************************************** ************************************************** *** * / 
{ position : Absolute ; Opacity : 0 ; filter : the Alpha (Opacity = 0); / * Do not occupy the space, you can click on * / }
 / * ************************************ ****************************************** * / 
{  
    Zoom : from 0.001 ; 
    - Transform-of MOZ : Scale (0) ; 
    -webkit-Transform : Scale (0) ; 
    -o-Transform : Scale (0) ; 
    Transform : Scale (0) ;
     / * IE6 / IE7 / IE9 does not occupy space, IE8 / FireFox / Chrome / Opera occupies space. Can not click on * / 
} / * ****************************************** ************************************ * /

{ 
    Position : Absolute ; 
    Zoom : from 0.001 ; 
    -moz-Transform : Scale (0) ; 
    -webkit-Transform : Scale (0) ; 
    -o-Transform : Scale (0) ; 
    Transform : Scale (0) ; 
     / * do not occupy space to click on * / 
}

二、display:none和visibility:hidden

Currently, I know there are three different (please add):

1. Space occupied
2. Reflux and rendering
3. Implicate sex

  display:noneHidden produce reflow and repaint (reflux and redraw), but visibility:hiddendoes not affect the issue of front-end performance; third point is estimated to be many colleagues do not know, is the difference between "implicated" of respect.

The so-called "implicate sex", that is, if the ancestor suffered a scourge, its children and grandchildren, without exception, also die. display:noneThat is "implicated" of the obvious statement: Once the parent element of the application display:none, the parent node and its descendant node elements of all invisible, and no matter how their children and grandchildren elements unyielding struggle to no avail.

In the actual web application, we should always realize some display hidden function, due to display:nonetheir own characteristics and potential of jQuery driven, allows us to display:nonethis hidden characteristics quite well known. Thus, over time it will form a relatively strong emotional awareness and inevitably migrate to this understanding the performance of other similar properties (EG.  visibility) On the understanding, plus some general experience ......

For example it, under normal circumstances, we apply to a parent element visibility:hidden, its descendants will all be invisible. So, we will have a similar understanding of migration: application of the visibility:hiddensons of the elements in the statement how unyielding struggle could not escape the fate of the invisible be denied. And in fact there hidden "failure" of the situation.

Hidden when "failure"? Quite simply, if descendant elements of the application visibility:visible, then the descendant elements will emerge Liu Qian camel.

visibilityIt is such a funny property.

Comparison Summary:
display:noneis a very inhuman statement, all future generations Gaosi (implicate sex), and even pieces of his burial place not to leave (no space), leading to all the people in an uproar (rendering and reflux).
visibility:hiddenIt is a humanitarian concern, although a last resort Gaosi sons, but descendants through certain means of avoiding (pseudo implicate sex), but also the whole body after death, cemetery taste (footprint), the people at relatively lightly (no rendering and reflux).

 Three, visibility hide "failure" Magical

See: CSS3 simulation instance page interface effects cool window7

Checking whether or not the check box corresponding to the display portion and hiding. For example, a fillet crash and make the parent tag of ah, projection, ah, ah, what the background are hidden away, leaving only the text inside the box. How to achieve that? If it is necessary display:none, the text inside the box will be denied out together, and if the script is to control the style, oh wow, so many styles, think about the big head. There is no doubt use this visibilitycontrol is the most efficient and most ingenious way.

Four, height: 0 and overflow: hidden combination of

overflow:hiddenWith Chinese understanding is "hidden overflow" that is something other than a click away boxes are not visible. Plus height:0, as long as the general non-inline level elements, the internal elements of all the descendants should not be visible. It is our understanding figurative, and N are so many empirically validated, but the fact is this?

Look at a counterexample demo, you can click here mercilessly: 0 height overflow hidden "failure" demo

height:0And overflow:hiddena combination of hidden "failure" of the following conditions: no ancestor element position:relative/absolute/fixeddeclaration, while internal sub-elements applied position:absolute/fixedstatement.

Why is this so?
Look under the CSS2.1 specification of a point in the interpretation of the overflow:

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

What does that mean? I was pondering and pondering, alas, only sigh understanding is not deep enough, some disarray. I think this should be roughly meaning (if not should correct me): overflowYou can cut beyond the elements other than block elements. Unless element beyond ancestor element comprises a block or an entire view of the overflow element. Then absolutely positioned elements containing block should contain is the position:relative/absolute/fixedancestor elements.

therefore:

body
    height: 0; overflow: hidden;
        position: absolute; /* 不会被隐藏 */
 /***************************************************/
position: relative;
    height: 0; overflow: hidden;
        position: absolute; /* 不会被隐藏 */
 /***************************************************/
height: 0; overflow: hidden;  position: relative;
    position: absolute; /* 会被隐藏 */
 /***************************************************/
height: 0; overflow: hidden;
    position: relative;
        position: Absolute; / * can be hidden * /

Remember this: position: absolutethe element spill overflow: hiddentime element, if it contains the first positionattribute ( staticancestor elements except) of (up to body) a overflow: hiddentime element ancestor elements, not hidden; otherwise hidden.

Or remember this: Mars on Earth triggers a law, if Martian father out of this law, then the Martian nothing had happened; otherwise, go to jail! O (∩_∩) O

Five, height: 0 and overflow: hidden "failure" Magical

text-align: Top positioning demo at the right statement

Later it was reflected, this method is nice, but there is a problem, because I called the label inside  the space, resulting in a blank space height ah!

How to fix the height of the space here to generate it? Use line-height: 0; ? Or use font-size: 0;? If it were not line-heightand font-sizeare inherited, this is indeed a good way (font-size as well as Chrome the default text can not be less than 12 pixels questions, 0-pixel text rendering issues at the archaeological version of IE dots).

After my careful testing, in order to OOCSS development model, used here height:0and overflow:hiddenit is the best way.

h0 ovh tr
      abs

You can click here mercilessly: text-align = left back to top without taking up space demo

Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/02/27/2934515.html