A formázási modell

A böngészők a weboldalt egy ablakban jelenítik meg. Ez az ablak azonban nem feltétlenül elegendően nagy ahhoz, hogy az egész dokumentum egyszerre legyen benne látható. Ilyenkor a dokumentum fölött az ablak elmozdítható, hogy a nem látható részek is láthatóvá váljanak. Ezt az ablakot nevezik az angol nyelvű szabványban viewportnak. A továbbiakban erre fogunk böngészőablakként hivatkozni. Ez befolyásolhatja a weboldalon található objektumok elhelyezkedését is, így az ablak átméretezése a weboldal kinézetének megváltozását eredményezheti.

A másik fontos kifejezés a vászon (canvas). A szabvány azt a képzeletbeli síkot nevezi vászonnak, amelyre az egyes objektumokat tartalmazó dobozokat helyezi el a böngésző. Minden böngészőablakban egy vagy több vászon jelenhet meg (több: keretek alkalmazása).

A következő kifejezés a tartalmazó doboz, amely egy adott doboz esetében azt a dobozt jelenti, amelynek a belső dobozában található. Amennyiben ismerjük a HTML elemek leszármazási hierarchiáját, akkor minden elem dobozához a tartalmazó doboz az elem ősének doboza lesz – kivéve, ha az elem-fában nem szereplő objektum a kettejük közé beilleszt egy további dobozt is.

Az elem-fa gyökere által létrehozott dobozt nevezzük kezdeti tartalmazó doboznak (initial containing block), amely azt jelzi, hogy minden további dobozt ez a doboz fog tartalmazni. Ennek méretét befolyásolja a böngészőablak mérete, de ha a width és height tulajdonságokkal pontos értéket adunk meg neki, akkor attól függetlenné tehetjük.

Általában az objektumok dobozai a következőképpen fognak megjelenni:

• Az egymás után következő blokk-szintű elem dobozai egymás alá kerülnek.
• Ha egy blokk-szintű elem tartalmaz egy másik blokk-szintű elemet, akkor annak doboza belekerül ennek belső dobozába. Ebben az esetben a leszármazott elem doboza számára a külső elem belső doboza lesz a tartalmazó doboz, így a relatív méretek erre fognak vonatkozni.
• Egy blokk-szintű elemen belüli sor-szintű elemek a blokk-szintű elem dobozában sordobozokba rendeződnek a rendelkezésre álló helyhez igazodva. Ha egy sorbeli elem tartalma nem fér el az adott sordobozba, akkor egyszerre akár több egymás utáni sordobozba is tördelhető a tartalma.

A sordoboz szélességét az azt tartalmazó doboz szélessége határozza meg. A sordoboz magassága pedig a benne levő elemek által igényelt magasságtól, illetve a line-height tulajdonságtól függ. A sordoboz magassága mindig legalább akkora, amekkora a benne levő legmagasabb doboz magassága.