*, *: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