Rozvržení HTML dokumentu HTML Page Layout
Úvod Chceme-li proniknout do mechanizmu stojícím za tím, jak webové prohlížeče generují rozvržení HTML dokumentu a získat tak maximální kontrolu nad umístěním každého elementu naší webové stránky, musíme nejprve plně porozumět následujícím konceptům, které se při sestavování stránky v enginu prohlížeče uplatňují a spolupodílejí se tak na jejím konečném vzhledu: 1) DOM – Dokument Object Model 1.1. hierarchie 1.2. dědičnost 2) Dokument Flow – Normální Tok Dokumentu 2.1. inline-level vs. block-level elementy 2.2. kontejnerové vs. prázdné elementy 3) Box Model a ostatní techniky rozvržení stránky 3.1. rozměrové jednotky 3.2. techniky rozvržení (box model) 3.3. css vlastnost FLOAT
Box Model Každý element dokumentu je chápán jako samostatný obsah obklopený boxem, kterému můžeme přidělovat následující css vlastnosti: <body> <div> <p class= „žlutý" > Zde se nachází text odstavce, který je obklopen dvěma bo- xy (elementu p a div) </p> <p class= „modrý" > </div> </body> <body> <div> <p class= „modrý" > Zde se nachází text odstavce, který je obklopen dvěma bo- xy (elementu p a div) </p> </div> </body> P { width: 200px; height: 200px; border: padding: 20px; margin: 10px; } width: 250px; border: 2px; padding: 20px; Zde se nachází text odstavce, který je obklopen dvěma bo- xy (elementu p a div) Zde se nachází text odstavce, který je obklopen dvěma bo- xy (elementu p a div) inherit; 2px; div { Zde se nachází text odstavce, který je obklopen dvěma bo- xy (elementu p a div) HTML kód Box Model CSS kód