Chapter 4 Complex Layouts
4. Complex Layouts
Inthischapter,we’lldigintoafewCSSlayouttopics.Inthefirsthalf,we’lltackle
twofundamentalsofCSSlayout:theboxmodelandstackingcontext.Understanding
theseconceptswillhelpyoucreatecomplexlayoutsanddiagnoselayoutbugs.
Inthesecondhalfofthechapter,we’lllookattwonewerlayout-relatedCSSspe-
cifications:theCSSmulticolumnlayoutmoduleandtheflexibleboxmodule(better
knownasflexbox).Bothmodulesallowdeveloperstocreatelayoutsthatarerobust
andadaptableacrossarangeofdevicesizes.
Managing the CSS Box Model
PerhapsthemostimportantpointtounderstandaboutCSSisthis:Everythingisa
box.Morespecifically,everyelementinadocumentgeneratesabox.Thisboxmay
beablock-levelbox,oritmaybeaninline-levelbox.Theboxtypedetermineshow
theelementaffectspagelayout.
Whetherornotanelementcreatesaboxandwhichtypeofboxitcreateswilldepend
onthemarkuplanguage.CSSdevelopedasawaytostyleHTMLdocumentsso,as
aresult,muchoftheCSSvisualrenderingmodelisrootedinHTML4’sdistinction