60 likes | 214 Views
GWEB1. Mgr. Vlastislav Kučera přednáška č. 9. Obsah přednášky. Polohování normální řazení plovoucí boxy Vlastnosti float clear. Normální řazení. boxy jsou formátovány buď blokově, nebo řádkově, nikdy ne oběma způsoby současně blokové formátování
E N D
GWEB1 Mgr. Vlastislav Kučera přednáška č. 9
Obsah přednášky • Polohování • normální řazení • plovoucí boxy • Vlastnosti • float • clear
Normální řazení • boxy jsou formátovány buď blokově, nebo řádkově, nikdy ne oběma způsoby současně • blokové formátování • boxy kladeny vertikálně za sebou, odshora obsahujícího bloku • vertikální vzdálenost mezi boxy dvou sourozenců– dána marginem • vertikální okraje splývají • řádkové formátování • boxy kladeny horizontálně za sebou • horizontální okraje, orámování a výplně se respektují
Plovoucí boxy • plovoucí box – box, který je na řádce posunut vlevo nebo vpravo • obsah může obtékat po jejich straně (nebo naopak nemůže) • obsah obtéká zprava plovoucí boxy vlevo a naopak • musí mít explicitní šířku • plovoucí box je vždy blokový a je posunut vlevo (vpravo) tak daleko, až se jeho vnější hrana dotýká buď hrany obsahující bloku, nebo vnější hrany jiného plovoucího boxu
Vlastnost float • určuje, zda má box plavat vlevo, vpravo nebo vůbec neplavat • hodnoty • left, right, none, inherit • výchozí hodnota • none • význam hodnot • left – prvek generuje vlevo plovoucí box; obsah obtéká zprava • right - prvek generuje vpravo plovoucí box; obsah obtéká zleva • př.: priklad-float.html
Vlastnost clear • určuje, které strany boxu prvku nesmí sousedit s předcházejícím plovoucím boxem • hodnoty • left, right, both, none, inherit • výchozí hodnota • none • význam hodnot • left – horní okraj generovaného boxu se zvětší natolik, aby se jeho horní hrana orámování ocitla pod spodní vnější hranou jakéhokoli vlevo plovoucího boxu • right - horní okraj generovaného boxu se zvětší natolik, aby se jeho horní hrana orámování ocitla pod spodní vnější hranou jakéhokoli vpravo plovoucího boxu • both – generovaný box je přesunut pod všechny plovoucí boxy generované prvky uvedenými dříve v dokumentu • none • př.: priklad-clear.html