CSS Master

(Primo) #1
*, *:before, *:after {
box-sizing: inherit;
}

Thisappliesborder-boxsizingtoeveryelementbydefault,withoutaffectingthe
box-sizingbehaviorofexistingpartsofyourproject.Ifyouknowthattherewillbe
nothird-partyorlegacycomponentsthatrelyoncontent-boxbehavior,youcan
simplifytheserules:

*,
*:before,
*:after {
box-sizing: border-box;
}

Table4.1showscurentbowsersupportforbox-size: border-box

Table 4.1. Browser support for box-size: border-box


Internet Firefox Safari Chrome Opera Android
Explorer
2.1+ (versions
< 4 require
-webkit-
prefix)

4+ (versions < 1 0.1+
9 require
-webkit-
prefix)

3.1+ (versions
< 5.1 require
-webkit-
prefix)

2+ (versions <
29 require
-moz- prefix)

8+

Managingtheboxmodelisjustoneingredientinunderstandinghowtocreate
complexlayouts.Let’sdigintolayeringelementsinthenextsection.

Managing Layers with position and z-index


Everyelementinadocumentparticipatesinastackingcontext.Thestackingcontext
is a model―a set of rules, really―for how elements are painted to the screen. If
you’ve ever used the z-indexproperty,you’veworkedwithstackingcontexts.

Theroothtmlelementcreatesarootstackingcontext.SomeCSSpropertiesand
valuescanalsotriggeralocalstackingcontextfortheelementstowhichthey’re

136 CSS Master

Free download pdf