Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
Rozvržení HTML dokumentu
HTML Page Layout
2
Ú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
3
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
Podobné prezentace
