CSS Master

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