poměrně často používaný v rozložení moderních webových stránek k vytváření mřížek a jednoduše znamená nějaký druh bloku nebo kontejneru. Je možné do něj vnořit i další tagy, což není možné u všech prvků bloku, takže
pohodlné použití. Bloky se obvykle skládají na sebe a nevkládají se do inline prvků. Vložené prvky HTML jsou text a k jeho stylizaci se používá CSS.
Při dané šířce obsahu je celková šířka bloku součtem hodnot pravého a levého odsazení, okraje, okraje a šířky. V dané výšce - od horní a spodní výplně, okrajů, okrajů a výšky. Text v prvcích bloku je ve výchozím nastavení zarovnán doleva. Pokud jeden z nich obsahuje vložené prvky spolu s prvky bloku, pak se kolem vložených prvků vytvoří anonymní blok. Bude na něj použit výchozí styl. Také zdědí zadaný styl přiřazený svému nadřazenému prvku.
Tok dokumentů Tok odkazuje na pořadí, ve kterém jsou prvky stránky zobrazeny, určené vlastnostmi určenými v CSS. V tomto případě jsou ve výchozím nastavení bloky seřazeny shora dolů, a pokud není dostatek místa, vložené značky se přesunou na nový řádek a seřadí se shora dolů a zleva doprava. Umístění prvku na stránce závisí na jeho umístění v kódu: čím vyšší je, tím dříve je umístěn. Každý z prvků bloku vypadá jako obdélník, který odsune své sousedy. Toto chování můžete změnit pomocí speciálních vlastností. Zarovnání určitých bloků na střed nebo strany kontejneru v CSS se nazývá umístění.
Polohovací prvky Umístění bloků lze řídit pomocí absolutního a relativního umístění. Umístění se používá k tomu, aby se velkým částem stránky dostalo konkrétní umístění, aby se vytvořila složitá rozhraní, vyskakovací okna a dekorativní prvky. Hlavní vlastností používanou k umístění bloků v CSS je position. Má čtyři hlavní vlastnosti:
relativní; absolutní; pevný; statický.
S jejich pomocí můžete přepínat režimy rozložení zadáním jednoho ze čtyř parametrů: nahoře, vpravo, dole nebo vlevo. Nechybí ani vlastnost pro řazení vrstev - z-index. Umístění se statickou vlastností se obvykle nepoužívá, protože označuje výchozí umístění bloků. Použití jakýchkoli parametrů to tedy nijak neovlivňuje. Další tři vlastnosti se používají pro rozložení: relativní, absolutní, pevné.
Relativní umístění Relativní umístění bloků v CSS, tedy vlastnost position: relativní, znamená, že prvek lze přesunout a změnit jeho původní pozici. Takový blok stále zůstává v proudu. Ve skutečnosti to není on sám, kdo je odsunut, ale jeho kopie. Hodnoty vlastností jsou nastaveny tak, aby přesně určovaly, o kolik se bude blok pohybovat jedním nebo druhým směrem. Nejčastěji se měří v pixelech. Ale je přijatelné použít jiné jednotky.
Použití vlastností pro relativní umístění Vlastnost top posouvá kopii určitého bloku nahoru nebo dolů o počet pixelů zadaný ve vlastnosti. Při jeho použití zůstávají prvky umístěné pod nebo nad na svých místech, protože ve skutečnosti se ani posouvaný blok nikam neposouvá.
Vlastnost bottom posouvá blok v opačném směru než vlastnost top. Kladná hodnota ji pomáhá posunout nahoru a záporná hodnota ji pomáhá posunout dolů. Vlastnosti vpravo a vlevo posouvají prvek doprava a doleva. Kombinací všech můžete nastavit přesné umístění bloku na stránce a posunout jej podél vertikální a horizontální souřadnicové osy. Pokud zvětšíte odsazení, nebudou se počítat od okraje samotného bloku, ale od jeho odsazení kopie na stranu.
Absolutní umístění Absolutní umístění bloků v CSS je určeno hodnotou vlastnosti absolutní pozice. Prvek, který je umístěn, absolutně vypadne z toku dokumentu a jeho místo zaujmou sousední bloky. Šířka takového prvku je roztažena v závislosti na jeho obsahu a lze ji posunout nastavením určitých hodnot pro vlastnosti nahoře, vlevo, vpravo, dole. Absolutní umístění bloků v CSS je užitečné pro nadpisy. Ale position: absolute funguje nejen pro blokové prvky, ale i pro inline prvky.
Zarovnání prvků na střed Umístěný absolutně vložený prvek se bude chovat úplně stejně jako vložený prvek. Polohování lze tedy použít i k ovládání textu v CSS. Můžete na něj aplikovat některé nové vlastnosti, například změnit výšku a šířku. Centrování a vertikální zarovnání v CSS využívá kombinaci několika vlastností. Řídí vertikální zarovnání vlastnosti top. Pokud chcete vycentrovat blok v CSS, hlavní kontejner by měl být relativně umístěn a zarovnaný prvek by měl být umístěn absolutně. Kontejner musí nastavit vlastnost top: 50 % a k posunutí prvku o polovinu jeho vlastní výšky použijte vlastnost translate s hodnotou „0, -50 %“. Absolutně umístěné prvky lze oddělit do nového typu, protože se na ně použijí vlastnosti, které nejsou dostupné pro jiné typy umístění.
Umístění vzhledem k levému hornímu rohu prohlížeče Vlastnosti vlevo, nahoře, vpravo a dole fungují odlišně na absolutně a relativně umístěných prvcích. U relativních prvků tyto vlastnosti nastavují odsazení vzhledem k tomu, kde se prvek nachází. Ty absolutně umístěné zaujímají místo vzhledem ke konkrétnímu souřadnicovému systému vázanému na velikost okna prohlížeče. Výchozími body tohoto systému jsou rohy okna. Při použití vlastnosti left se odsazení bude počítat od levé strany prohlížeče, ale nebude zde žádný posuvník. Vlastnost top, pokud je umístěna absolutně, určuje posun od horní části prohlížeče k horní části prvku, na který je aplikována. Kombinací obou vlastností lze prvek přesouvat vzhledem k levému hornímu rohu prohlížeče.
Umístění vzhledem k pravému hornímu rohu prohlížeče Podobně můžete pomocí vlastností right a top stisknout prvek na pravou stranu okna prohlížeče a změnit jeho svislou polohu a přesunout jej do pravého horního rohu. Pokud je vlastnost right nastavena na zápornou hodnotu, blok se přesune mimo okraj okna. Poté by se měl objevit posuvník. Chcete-li přesunout prvek dolů, použijte vlastnost bottom. Určuje odsazení od spodního okraje okna prohlížeče ke spodní části bloku. Pokud je jeho hodnota záporná, zobrazí se také posuvník, protože se prvek přesune za spodní okraj okna prohlížeče.
Souřadnicový systém pro absolutní polohování Ve výchozím nastavení jsou všechny prvky, kterým je přiděleno absolutní umístění, vázány na jeden souřadnicový systém – okno prohlížeče. Dá se to ale změnit tím, že nějakému rodičovskému prvku dáte relativní polohu. Potom podřízený blok změní své umístění v závislosti na rodiči. Pokud je mezi nadřazenými prvky několik s relativním umístěním, počítání se provádí od nejbližšího z nich. V tomto případě bude výchozí umístění odpovídat tomu, co je uvedeno v tagu body.
Referenční bod pro absolutně umístěný prvek Než bylo prvku přiděleno absolutní umístění, byl na nějakém místě zvaném implicitní počátek. Pokud takový blok nemá vlastnosti, nebude se pohybovat. Můžete jej posunout nastavením vlastnosti margin. Bude to fungovat podobně jako vlastnosti polohování. Pokud nedefinujete hodnotu vlastnosti left a všech ostatních, bude se rovnat hodnotě auto. Můžete také použít auto k vrácení prvků na jejich původní místa.
Pevné umístění Jiná hodnota je pevná. Vlastnost position ukotví prvek na určitém místě. Pevné umístění se často používá k vytváření nabídek v CSS. Je to podobné jako absolutní, ale pevný blok vypadne z toku. I při rolování stránky zůstane takový prvek na svém místě, proto je vhodné jej použít pro vytvoření menu v CSS. Počáteční bod bude vázán na okno prohlížeče. Pokud je umístěno několik bloků, použije se k jejich řazení vlastnost z-index. S jeho pomocí můžete překrývat relativní bloky s absolutními, pokud jim dáte odpovídající index, vyjádřený jako celé číslo. Čím větší je, tím vyšší bude blok.
Jednou z nejlepších věcí na CSS je, že styly nám dávají možnost umístit obsah a prvky na stránku téměř jakýmkoliv představitelným způsobem. To dodává našemu návrhu strukturu a pomáhá tomu, aby byl obsah vizuálnější.
Je tu pár odlišné typy polohování v CSS, každý z těchto typů má svůj vlastní rozsah. V této kapitole se podíváme na několik různých případů použití – vytváření opakovaně použitelných rozvržení a jedinečné umístění jednorázových prvků – a popíšeme několik metod, jak toho dosáhnout.
Polohování pomocí plováku Jedním ze způsobů umístění prvků na stránku je vlastnost float. Tato vlastnost je poměrně univerzální a lze ji využít mnoha různými způsoby.
Vlastnost float v podstatě vezme prvek, odebere ho z normálního toku stránky a umístí jej vlevo nebo vpravo od jeho nadřazeného prvku. Všechny ostatní prvky na stránce se kolem takového prvku zalomí. Odstavce se například obtékají kolem obrázku, pokud prvek
Když je vlastnost float aplikována na více prvků najednou, umožňuje vytvořit rozvržení s plovoucími prvky vedle sebe nebo naproti sobě, jak je znázorněno na rozvržení s více sloupci.
Vlastnost float nabývá několika hodnot, z nichž dvě nejoblíbenější jsou left a right, které umožňují prvku plout vlevo nebo vpravo od svého rodiče.
Img ( plovoucí: vlevo; )
plavat v praxi Vytvořme obecné rozložení stránky se záhlavím nahoře, dvěma sloupci uprostřed a zápatím dole. V ideálním případě by tato stránka měla být označena prvky
,
, A , jak je popsáno v lekci 2 „Představení HTML“. Uvnitř prvku HTML může vypadat takto:
Ukázka rozložení bez plováku Zde jsou prvky A jsou blokové, takže se standardně skládají na sebe. Chceme však, aby tyto prvky seděly vedle sebe. Nastavením float na jako vlevo a pro jako vpravo je můžeme umístit jako dva sloupce proti sobě. Naše CSS by mělo vypadat takto:
Sekce ( plovoucí: vlevo; ) stranou ( plovoucí: vpravo; )
Pro referenci jsou plovoucí prvky umístěny podél okraje nadřazeného prvku. Pokud neexistuje žádný rodič, plovoucí prvek bude umístěn podél okraje stránky.
Když nastavíme prvek jako plovoucí, odstraníme jej z normálního toku dokumentu HTML. To způsobí, že výchozí šířka tohoto prvku se stane šířkou jeho obsahu. Někdy, například když vytváříme sloupce pro opakovaně použitelné rozvržení, je toto chování nežádoucí. To lze opravit přidáním vlastnosti width s pevnou hodnotou pro každý sloupec. Navíc, abychom zabránili tomu, aby se plovoucí prvky vzájemně dotýkaly a způsobily, že obsah jednoho prvku bude sedět vedle druhého, můžeme použít vlastnost margin k nastavení mezery mezi prvky.
Níže rozšiřujeme předchozí blok kódu přidáním okraje a šířky pro každý sloupec, abychom lépe tvarovali požadovaný výsledek.
Sekce ( plovoucí: vlevo; okraj: 0 1,5 %; šířka: 63 %; ) stranou ( plovoucí: vpravo; okraj: 0 1,5 %; šířka: 30 %; )
Demo rozložení s plovákem float může změnit zobrazovanou hodnotu prvku U plovoucího prvku je také důležité pochopit, že prvek je odstraněn z normálního toku stránky a že se výchozí hodnota zobrazení prvku může změnit. Vlastnost float závisí na tom, že hodnota zobrazení prvku je nastavena na blok a může změnit výchozí hodnotu zobrazení prvku, pokud již není vykreslen jako prvek bloku.
Například prvek, jehož zobrazení je zadáno jako inline , například inline , ignoruje všechny vlastnosti výšky nebo šířky. Pokud však zadáte plovoucí hodnotu pro vložený prvek, hodnota zobrazení se změní na blok a prvek již může mít vlastnosti výšky nebo šířky.
Když prvek plovoucí, musíme být opatrní, jak to ovlivňuje hodnotu vlastnosti display.
Pro dva sloupce můžete nastavit plovoucí, jeden sloupec jako levý a druhý jako pravý, ale pro více sloupců budeme muset změnit náš přístup. Řekněme, že bychom například chtěli mít mezi našimi prvky řadu tří sloupců A . Pokud odhodíme náš živel a použít tři prvky , naše HTML může vypadat takto:
Uspořádat tyto tři prvky v třísloupcové řadě musíme pro všechny prvky nastavit float jako vlevo. Musíme také upravit šířku zohlednění dalších sloupců a jejich umístění jeden vedle druhého.
Sekce ( plovoucí: vlevo; okraj: 0 1,5 %; šířka: 30 %; )
Zde máme tři sloupce, všechny se stejnou šířkou a hodnotou okraje a plovoucí lištu nastavenou doleva .
Ukázka třísloupového rozložení s plovákem Vymazání a plovoucí obsah Vlastnost float byla původně navržena tak, aby umožňovala obsahu obtékat obrázky. Obrázek může mít plovoucí vlastnosti a veškerý obsah kolem něj přirozeně proudí kolem něj. I když to funguje skvěle pro obrázky, vlastnost float ve skutečnosti nebyla určena k použití pro účely rozvržení a umístění, a proto přichází s několika úskalími.
Jedním z těchto úskalí je, že se někdy správné styly neobjeví na prvku, který sousedí s plovoucím prvkem nebo je jeho rodičem. Když je prvek nastaven jako plovoucí, je odstraněn z normálního toku stránky a v důsledku toho mohou být styly prvků kolem tohoto plovoucího prvku negativně ovlivněny.
Hodnoty vlastností margin a padding jsou často interpretovány nesprávně, což způsobuje, že splývají s plovoucím prvkem. Mohou být ovlivněny i další vlastnosti.
Další chybou je, že někdy se kolem prvku float začne nabalovat nežádoucí obsah. Odstranění prvku z toku dokumentu umožňuje všem prvkům kolem plovoucího prvku jej obejít a zabírat veškerý dostupný prostor kolem plovoucího prvku, což je často nežádoucí.
V našem předchozím příkladu se dvěma sloupci poté, co jsme k prvkům přidali float A , ale před nastavením vlastnosti width na kterýkoli z nich obsah uvnitř prvku byl umístěn mezi dvěma proudnicovými prvky nad ním a vyplňoval veškerý dostupný prostor. Proto prvek bude v prostoru mezi prvky A , zabírající volné místo.
Ukázka rozložení bez čištění plováku Aby se obsah neobtékal kolem plovoucích prvků, musíme uvolnit plovoucí prvek a vrátit stránku do normálního toku. Podíváme se, jak vyčistit plováky a pak se podíváme na jejich obsah.
Čištění plováků K vymazání floatu dochází pomocí vlastnosti clear, která nabývá několika různých hodnot: nejčastěji používané hodnoty jsou left , right a both .
Div (vymazat: vlevo; )
Hodnota vlevo vymaže levé plovoucí body, zatímco hodnota vpravo vymaže plovoucí pravé. Hodnota both však vymaže levou a pravou plovoucí hodnotu a je často tou nejideálnější možností.
Vraťme se k našemu předchozímu příkladu, pokud použijeme vlastnost clear s hodnotou obou na prvku , pak můžeme vyčistit plovák. Je důležité, aby se clear použilo na prvek zadaný po plovoucích prvcích a ne před ním, aby se stránka vrátila do normálního chodu.
Zápatí (jasné: obojí; )
Ukázka rozložení s čištěním plováku Plovoucí obsah Namísto vymazání float je další možností nastavit obsah na float. Výsledek bude v podstatě stejný, ale plovoucí obsah skutečně zajišťuje, že se všechny naše styly zobrazí správně.
Chcete-li nastavit plovoucí obsah, plovoucí prvky musí být uvnitř nadřazeného prvku, bude fungovat jako kontejner a tok dokumentu zůstane zcela normální mimo něj. Styl tohoto nadřazeného prvku je reprezentován třídou skupiny, jak je znázorněno zde:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; )
Tady se toho moc neděje, ale v podstatě vše, co CSS udělá, je vymazat všechny plovoucí prvky uvnitř elementu skupiny a vrátit dokument do normálního toku.
Přesněji řečeno, pseudoprvky ::before a ::after, jak je diskutováno v lekci 4, dynamicky generují prvky nad a pod prvkem s class group . Tyto prvky nezahrnují žádný obsah a jsou vykresleny jako prvky tabulky, podobně jako prvky bloku. Dynamicky generovaný prvek po prvku skupiny vymaže plovoucí hladinu uvnitř prvku skupiny, stejně jako to dělalo dříve. Nakonec prvek group také vymaže všechny plovoucí hodnoty, které se před ním mohou objevit v případě, že existuje plovoucí hodnota s hodnotou left nebo right . Součástí je také malý trik, díky kterému budou starší prohlížeče hrát pěkně.
Je zde více kódu než jen příkaz clear: both, ale může být docela užitečný.
S ohledem na naše dvousloupcové rozložení stránky bychom mohli zalomit A nadřazený prvek. Tento nadřazený prvek bude obsahovat plovoucí prvky. Kód bude vypadat takto:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; ) section ( float: left ; okraj: 0 1,5 %; šířka: 63 %; ) stranou ( plovoucí: vpravo; okraj: 0 1,5 %; šířka: 30 %; )
Ukázka rozložení s plovoucím obsahem Zde zobrazená technika je známá jako "clearfix" a je často k vidění na jiných stránkách s názvem třídy clearfix nebo cf. Rozhodli jsme se použít název třídy group, protože představuje skupinu prvků a lépe vyjadřuje obsah.
Když jsou prvky nastaveny na plovoucí, je důležité sledovat, jak ovlivňují tok stránky, a zajistit, aby se tok stránky resetoval vymazáním nebo prostřednictvím plovoucího obsahu, jak bylo zamýšleno. V opačném případě může sledování plovoucích položek způsobit spoustu starostí, zejména na stránkách, které obsahují více řádků, každý s více sloupci.
Na praxi Vraťme se na web Styles Conference a vyzkoušíme přidání plovoucích prvků k nějakému obsahu.
Za prvé, než použijeme float na jakýkoli prvek, pojďme poskytnout obsah těmto plovoucím prvkům přidáním clearfix do našeho CSS. V souboru main.css, hned pod naše styly mřížky, přidáme clearfix pod název třídy skupiny, stejně jako předtím. /* ================================================== ====== Clearfix ============================================* / .group::before, .group::after ( content: " "; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; ) Nyní, když můžeme použít float, pojďme jej definovat pro hlavní
vnitřní prvek jako vlevo a zbytek obsahu v záhlaví nechte stékat doprava.Chcete-li to provést, přidejte do prvku třídu loga
. Dále do našeho CSS přidáme novou sekci stylů pro hlavní záhlaví. V této části vybereme prvek s třídou loga a nastavte plovák doleva .
/* ========================================= Hlavní záhlaví ====== = ==================================== */ .logo (plovoucí: vlevo; )Když už jsme tady, pojďme přidat trochu více detailů k našemu logu. Začněme umístěním prvku
V CSS přidáme okraj podél horní části našeho loga a nějaké svislé vycpávky, aby logo mohlo volně „dýchat“.
Logo ( okraj-horní: 4px plné #648880; výplň: 40px 0 22px 0; plovoucí: vlevo; )
Protože jsme vytvořili prvek
zjednodušené, chceme nastavit obsah jako plovoucí . Přímý rodič pro je prvkem tak k tomu přidáme skupinovou třídu. Tím se na něj použijí styly clearfix, které jsme nastavili dříve.
Živel nabývá tvar, pojďme se tedy na prvek podívat . Podobné tomu, co jsme dělali my , nastavíme float pro naše autorská práva, jak je vlevo uvnitř a nechte všechny ostatní prvky proudit kolem něj doprava.
Na rozdíl od prvku třídu však nebudeme aplikovat přímo na prvek float. Tentokrát přidáme třídu do rodiče prvku float a pomocí jedinečného selektoru CSS prvek vybereme a poté mu udělíme float .
Začněme přidáním třídy primární zápatí k prvku . Protože víme, že uvnitř budeme mít zjednodušené prvky , pak bychom měli přidat třídu skupiny, když už jsme u toho.
Nyní, když je primární třída zápatí nastavena na prvek , můžeme tuto třídu použít ke konkrétnímu výběru prvku S pomocí CSS . Chceme tomu dát plavat jako vlevo . Nezapomeňte vytvořit novou sekci v našem souboru main.css pro styl hlavní zápatí.
/* ========================================= Hlavní suterén ====== ===================================== */ .primary-footer small (float: left; ) Pro kontrolu - zde vybereme prvek , který by měl být uvnitř prvku s hodnotou atributu class primární zápatí, jako je náš prvek
Nakonec přidáme malou výplň do horní a spodní části prvku. , pomůže to trochu oddělit od zbytku stránky. Můžeme to udělat přímo pomocí třídy primární zápatí.
Primární zápatí ( padding-bottom: 44px; padding-top: 44px; )
S přihlédnutím ke všem těmto změnám v prvcích A , musíme si být jisti, že je zahrneme na každou stránku, nejen na stránku index.html.
Rýže. 5.01. Použití více plovákových prvků A na hlavní stránce Styles Conference spolupracovat
Polohování pomocí inline bloku Kromě použití float je dalším způsobem, jak můžeme umístit obsah, pomocí vlastnosti display v kombinaci s hodnotou inline-block. Metoda inline-block, jak si probereme později, je primárně užitečná pro rozvržení stránek nebo pro umístění prvků do řádku vedle sebe.
Připomeňme, že hodnota inline-block pro vlastnost display zobrazuje prvky v řádku a umožňuje jim převzít všechny vlastnosti krabicového modelu, včetně výšky , šířky , odsazení , ohraničení a okraje . Použití inline-block nám umožňuje plně využít blokový model, aniž bychom se museli starat o odstranění jakýchkoliv plováků.
inline-blok v praxi Podívejme se na náš třísloupcový příklad od začátku. Začneme uložením našeho HTML takto:
Nyní místo plováku pro naše tři elementy změníme jejich zobrazovanou hodnotu na inline-block , ponecháme vlastnosti okrajů a šířka jsou stejné jako dříve. V důsledku toho bude naše CSS vypadat takto:
Sekce ( zobrazení: inline-block; okraj: 0 1,5 %; šířka: 30 %; )
Bohužel tento kód sám o sobě nestačí k provedení triku a posledního prvku je posunut na nový řádek. Pamatujte si, že protože prvky vloženého bloku se objevují na řádku vedle sebe, obsahují mezi sebou jednu mezeru. Když se velikost každého jednotlivého prostoru přičte k šířce a hodnotě horizontálního okraje všech prvků v řadě, celková šířka bude příliš velká a vytlačí se poslední prvek na nový řádek. Pro zobrazení všech položek na jednom řádku byste měli odstranit prázdné místo mezi každým
Ukázka prvků inline-block s prostorem Odstranění mezery mezi prvky vkládaných bloků Existuje několik metod pro odstranění mezery mezi prvky vložených bloků a některé jsou složitější než jiné. Nejvíce se zaměříme na dva jednoduché metody , z nichž každý se vyskytuje uvnitř HTML.
Prvním řešením je umístit každou novou značku úvodního prvku na stejném řádku jako uzavírací značka předchozího prvku . Místo použití nový řádek pro každý prvek skončíme tak, že prvky začneme na stejném řádku. Naše HTML může vypadat takto:
Zápis prvků inline-block tímto způsobem zajišťuje, že mezi takovými prvky v HTML nebude mezera. Mezera se tedy při zobrazení stránky nezobrazí.
Ukázka prvků inline-block bez mezer Další metodou pro odstranění mezery mezi prvky inline-block je otevření komentáře HTML bezprostředně za uzavírací značkou prvku. Poté komentář zavřete těsně před úvodní značkou dalšího prvku. To umožňuje prvkům vložených bloků začínat a končit na samostatných řádcích v HTML a „komentovat“ jakýkoli potenciální prostor mezi prvky. Výsledný kód bude vypadat takto:
Žádná z těchto možností není dokonalá, ale jsou užitečné. Mám tendenci upřednostňovat používání komentářů pro lepší organizaci, ale kterou možnost si vyberete, je čistě na vás.
Vytvořte znovu použitelná rozvržení Při vytváření webu je vždy nejlepší napsat modulární styly, které lze znovu použít jinde, a znovu použitelná rozvržení jsou na vrcholu seznamu opakovaně použitelného kódu. Rozvržení lze vytvořit pomocí prvků float nebo inline-block, ale které fungují nejlépe a proč?
Otázka, zda jsou pro strukturu stránky lepší prvky float nebo inline-block, je otevřená k diskusi. Můj přístup spočívá v použití prvků inline-block k vytvoření mřížky nebo rozvržení stránky a poté použití float, když chci, aby obsah obtékal prvek (k čemuž byly plováky navrženy při práci s obrázky). Obecně se mi také zdá jednodušší pracovat s prvky inline-block.
Použijte však to, co vám nejlépe vyhovuje. Pokud znáte jeden přístup více než jiný, použijte jej.
Připravují se nové specifikace CSS – konkrétně vlastnosti ohybu a mřížky – které vám pomohou rozhodnout, jak nejlépe rozmístit stránky. Sledujte tyto metody, když se začnou objevovat.
Na praxi S pevným pochopením opakovaně použitelných rozvržení je čas implementovat jedno na našem webu Styles Conference.
Pro web Styles Conference vytvoříme třísloupcový layout s použitím prvků inline-block. Uděláme to tak, že dostaneme tři stejně široké sloupce nebo dva sloupce s celkovou šířkou rozdělenou mezi ně jako 2/3 pro jeden a 1/3 pro druhý.
Nejprve vytvoříme třídy, které definují šířku těchto sloupců. Tyto dvě třídy budeme nazývat col-1-3 pro jednu třetinu a col-2-3 pro dvě třetiny. V sekci Grid našeho souboru main.css pojďme vpřed a definujme tyto třídy a jejich odpovídající šířky.
Col-1-3 (šířka: 33,33 %; ) .col-2-3 (šířka: 66,66 %; )
Chceme, aby se oba sloupce jevily jako prvky inline bloku. Musíme se také ujistit, že jejich vertikální zarovnání je nastaveno na vrchol každého sloupce.
Pojďme vytvořit dva nové selektory, které sdílejí zobrazení a vertikální zarovnání .
Col-1-3, .col-2-3 ( display: inline-block; vertical-align: top; )
Podívejte se znovu na CSS. Vytvořili jsme dva selektory tříd col-1-3 a col-2-3 oddělené čárkou. Čárka na konci prvního voliče znamená, že za ním následuje další volič. Za druhým selektorem je otevírací složená závorka, která označuje, že začíná popis stylu. Použitím čárky k oddělení selektorů můžeme svázat jeden styl s několika selektory současně.
Chceme mezi sloupce vložit určitou mezeru, která pomůže rozdělit obsah. To lze provést přidáním vodorovného odsazení do každého sloupce.
To funguje dobře, ale když se umístí dva sloupce vedle sebe, šířka mezery mezi nimi bude dvakrát širší než prostor od vnějšího okraje. Abychom to vyvážili, dáme všechny naše sloupce do mřížky a přidáme do ní stejnou výplň.
Použijme třídu mřížky k definování naší mřížky a potom dáme stejné horizontální odsazení třídám mřížka, col-1-3 a col-2-3. Naše selektory opět oddělují čárkami a naše CSS vypadá takto:
Mřížka, .col-1-3, .col-2-3 ( padding-left: 15px; padding-right: 15px; )
Když nastavujeme horizontální výplň, musíme být opatrní. Pamatujte, že v minulé lekci jsme vytvořili kontejner s třídou kontejner, abychom vycentrovali veškerý náš obsah na stránku o šířce 960 pixelů. V tento moment , pokud bychom umístili prvek s třídou grid do prvku s třídou kontejner, pak by se jejich horizontální výplň sčítala a naše sloupce by se nezobrazovaly v poměru k šířce zbytku stránky.
Uděláme to rozdělením staré sady pravidel kontejneru na následující:
Container, .grid ( margin: 0 auto; width: 960px; ) .container ( padding-left: 30px; padding-right: 30px; )
Nyní bude jakýkoli prvek s třídou kontejneru nebo mřížky široký 960 pixelů a bude umístěn ve středu stránky. Kromě toho jsme zachovali stávající horizontální odsazení pro jakýkoli prvek s třídou kontejneru tím, že jsme jej přesunuli do nové samostatné sady pravidel.
Dobře, veškerá těžká část nastavení sítě je dokončena. Nyní je čas pracovat s naším HTML a podívat se, jak tyto třídy fungují.
Začneme upoutávkami na domovské stránce, v souboru index.html, zarovnanými do tří sloupců. Aktuálně jsou upoutávky zabaleny do elementu s kontejnerovou třídou. Chceme změnit třídu kontejneru na grid, abychom dovnitř mohli začít umísťovat sloupce.
...
...
...
...
A nakonec, protože každý z našich sloupců je vložený blokový prvek, musíme se ujistit, že mezi nimi odstraníme všechny prázdné mezery. K tomu použijeme komentáře a do každé sekce přidáme nějakou dokumentaci, abychom lépe uspořádali náš kód.
...
...
...
Pro kontrolu jsme na řádku 3 zanechali komentář identifikující sekci „Reproduktory“, která za ním následuje. Na konci řádku 7 otevřeme komentář bezprostředně za uzavírací značkou. Uvnitř tohoto komentáře na řádku 9 definujeme následující sekci "Rozvrh". Poté komentář zavřete na začátku řádku 11, těsně před úvodní značkou . Podobná struktura komentáře se objeví na řádcích 13 až 17 mezi těmito dvěma prvky , přímo před sekcí Místo konání. Obecně jsme zakomentovali jakékoli potenciální prázdné místo mezi sloupci a současně použili stejné komentáře k identifikaci našich sekcí.
Nyní máme znovu použitelnou třísloupcovou mřížku, která podporuje různá rozvržení s použitím 1/3 a 2/3 šířky sloupců. Naše domovská stránka nyní obsahuje tři sloupce oddělující všechny upoutávky.
Rýže. 5.02. Domovská stránka Konference stylů nyní obsahuje rozvržení ve třech sloupcích
Demo a zdrojový kód Níže si můžete prohlédnout web Styles Conference v aktuálním stavu a také stáhnout zdroj webu v tuto chvíli.
Jedinečné umístění prvku Dříve nebo později bude chtít každý prvek přesně umístit, ale prvky typu float nebo inline-block takový trik neumožňují. Plovoucí prvky, které odebírají prvek z toku stránky, často vedou k nežádoucím výsledkům, protože okolní prvky se obtékají kolem plovoucího prvku. Inline blokové prvky, pokud nevytváříme sloupce, mohou být docela nešikovné, pokud jde o správné umístění. Pro situace, jako je tato, můžeme použít vlastnost position v kombinaci s vlastnostmi offsetu bloku.
Vlastnost position určuje, jak je prvek umístěn na stránce a zda bude zobrazen v normálním toku dokumentu. Používá se ve spojení s vlastnostmi odsazení bloku top , right , bottom a left , které přesně určují, kde bude prvek umístěn pohybem prvku v různých směrech.
Ve výchozím nastavení je hodnota pozice každého prvku nastavena na static , což znamená, že prvek existuje v normálním toku dokumentu a nepřebírá žádné vlastnosti k jeho umístění. Hodnota static se nejčastěji přepisuje hodnotou relativní nebo absolutní , na kterou se podíváme dále.
Relativní umístění Nastavení vlastnosti position na relativní umožňuje, aby se prvky objevily v normálním toku stránky, čímž se vyhradí místo pro prvek, jak bylo zamýšleno, a zabrání se tomu, aby kolem něj proudily jiné prvky. Umožňuje však také upravit polohu prvku pomocí vlastností odsazení. Zvažte například následující HTML a CSS:
...
...
...
Div ( výška: 100px; šířka: 100px; ) .offset (vlevo: 20px; pozice: relativní; nahoře: 20px; )
Ukázka relativní polohy Zde pro druhý prvek
s třídou offsetu je hodnota pozice nastavena na relativní, stejně jako dvě vlastnosti offsetu – vlevo a nahoře. Tím se zachová původní poloha prvku a ostatní prvky se do této oblasti nebudou moci přesunout. Vlastnosti offsetu navíc posunou prvek jeho posunutím 20 pixelů zleva a 20 pixelů shora od původního umístění.
U relativně umístěných prvků je důležité vědět, že vlastnosti odsazení bloku určují, kam bude prvek posunut vzhledem k jeho původní poloze. Takže vlastnost left s hodnotou 20 pixelů ve skutečnosti posune prvek o 20 pixelů doprava. Horní vlastnost s hodnotou 20px pak posune prvek dolů o 20px.
Když umístíme prvek pomocí vlastností offsetu, prvek překryje prvek pod ním, místo aby jej tlačil dolů, jako to dělají vlastnosti margin nebo padding.
Absolutní umístění Absolutní hodnota vlastnosti position se liší od relativní hodnoty v tom, že absolutně umístěný prvek se neobjeví v normálním toku dokumentu a původní prostor a pozice absolutně umístěného prvku nejsou vyhrazeny.
Absolutně umístěné prvky se navíc pohybují vzhledem k jejich nejbližšímu relativně umístěnému rodičovskému prvku. Pokud relativně umístěný rodič neexistuje, bude absolutně umístěný prvek umístěn relativně k prvku
. Toto je malá informace; pojďme se podívat, jak to funguje uvnitř nějakého kódu:
Sekce ( pozice: relativní; ) div ( pozice: absolutní; vpravo: 20px; nahoře: 20px; )
Ukázka absolutní polohy V tomto příkladu prvek je umístěn relativně k, ale nezahrnuje žádné vlastnosti odsazení. Jeho poloha se tedy nemění. Živel s třídou offsetu zahrnuje hodnotu pozice jako absolutní. Od prvku
je relativně nejblíže k rodičovskému prvku , pak prvek
bude umístěn vzhledem k prvku
.U relativně umístěných prvků určují vlastnosti odsazení, kterým směrem bude prvek vůči sobě posunut. U absolutně umístěných prvků určují vlastnosti odsazení, kterým směrem se prvek posune vzhledem k jeho nejbližšímu relativně umístěnému rodiči.
V důsledku vlastností right a top, element
se zobrazí 20 pixelů zprava a 20 pixelů shora uvnitř
.Od prvku
umístěn absolutně, není umístěn v normálním toku stránky a překrývá všechny prvky, které ji obklopují. Navíc výchozí pozice
se neuloží a toto místo mohou převzít jiné prvky. Obecně lze většinu polohování provést bez použití vlastností polohy a offsetu, ale v některých případech mohou být mimořádně užitečné.
souhrn Naučit se umísťovat obsah v HTML a CSS je obrovským krokem ke zvládnutí těchto jazyků. Přidejte k tomu blokový model a jsme na dobré cestě stát se front-endovými vývojáři.
Tento tutoriálový článek se bude věnovat velmi důležitému tématu, které souvisí s umístěním prvků na stránce a bude od vás vyžadovat maximální pozornost. Seznámíte se s následujícími typy umístění prvků: absolutní , relativní , pevný A statický .
Umístění vám umožní umístit ten či onen prvek na místo, kde jej potřebujete, účelem tohoto článku je pochopit, jakými pravidly se to děje, jaké vlastnosti CSS je třeba použít a proč.
Typy polohování prvků
Základy Vlastnost CSS Vlastnost position, která vám umožňuje ovládat umístění prvků na stránce, říká prohlížeči, jaký typ umístění se pro prvek používá ( statický -statický relativní -relativní, absolutní – absolutní , popř pevný - pevný).
Chcete-li plně pochopit, jak jsou prvky umístěny na jakékoli stránce, musíte podrobně prostudovat všechny typy umístění. Takovou příležitost vám poskytne tento výukový článek; nyní budeme hovořit samostatně o každém typu umístění a analyzovat, jak a ve vztahu k čemu dochází k posunutí prvků v dokumentu.
Absolutní umístění
Jak jste si všimli, prvky, které mají absolutní umístění , oddělené od toku hlavní stránky , což může vést k vrstvení prvků na sebe. Ještě jedna nuance práce s prvky, které mají absolutní umístění , to jsou oni nemůže být plovoucí . Plovoucí prvky mohou být pouze prvky, které mají statické polohování (statický), tedy ten, který je pro prvek standardně nastaven. Metody práce s plovoucími prvky jsme probrali v učebnicovém článku "".
Relativní umístění
Dalším typem umístění, na který se podíváme, je relativní umístění (pozice: relativní) jsou posunuty (umístěny), nebo jinými slovy.
Přejděme rovnou k příkladu a pak si promluvme o všech nuancích, které se při práci objeví
</span> Relativní umístění prvků
statický
třída = "příbuzný" > relativní
class = "statický" > statický
Co jsme tedy udělali v tomto příkladu:
Pro bloky (prvky ), které mají
statické polohování (výchozí) nastavte výšku na 50 pixelů a barvu pozadí na -
Červené .
Umístili jsme prvek s relativní umístění (pozice : relativní ), nastavte jeho výšku na 100 pixelů a barvu pozadí zelená . Navíc bylo naznačeno, že on se pohybuje vzhledem ke své aktuální poloze od horního okraje o 50 pixelů a od levého okraje o 100 pixelů, což způsobí přetečení dokumentu.
Výsledek našeho příkladu:
Z tohoto příkladu je také nutné zdůraznit, že na rozdíl absolutní umístění ostatní prvky v dokumentu reagují na prvky s relativní umístění . Navzdory tomu, že jsme prohlížeči dali příkaz k přesunutí prvku, prohlížeč pro prvek vyhradil místo a před přesunem ponechal prázdné místo, kde by měl prvek zpočátku být.
V praxi s největší pravděpodobností nebudete muset přesouvat prvky, které mají relativní umístění . hlavní myšlenka relativní umístění není prvek někam posunout, ale vytvořit "kontejner" pro prvek, který má absolutní umístění
. Jinými slovy, vnořené prvky nebudou posunuty vzhledem k okraji okna prohlížeče, ale relativně k tomuto prvku, který bude mít relativní umístění a nachází se v hlavním vláknu dokumentu . Tento bod podrobněji zvážíme později v tomto výukovém článku.
Pevné umístění
Třetí typ umístění, na který se podíváme, je pevné polohování prvek se pohybuje vzhledem k danému okraji okna prohlížeče . Výrazná vlastnost Toto umístění je stejné jako při rolování stránky prvek zůstává na jednom místě , tedy zhruba řečeno, roluje spolu se stránkou (prvek je fixní).
Myslím, že při cestování po internetu jste často narazili na navigační nabídky, postranní panely nebo dokonce tlačítka „horní část stránky“, která jsou pevně na jednom místě. To vše je možné díky pevné polohování .
Podívejme se na příklad, ve kterém navrhneme pevný postranní panel.
</span> Pevné umístění prvku
pevný
třída = "kontejner" >
Podívejme se, co jsme udělali v tomto příkladu:
Sada pro prvky A výška rovná 100 %, to nám umožní nastavit výšku v procentech pro náš postranní panel. Kromě toho jsme u těchto prvků odstranili okraje, což je nutné k odstranění vestavěných stylů prohlížeče.
U našeho postranního panelu nastavte výšku na nadřazený prvek (100 %), šířku na 15 % nadřazeného prvku a nastavte barvu pozadí Červené . Také poukázal na to, že náš postranní panel má pevné polohování , což umožňuje, aby se zdálo, že se přilepí na obrazovku. Aby se náš panel zobrazil vpravo, nastavíme správnou hodnotu na 0 (odsazení umístěného prvku od pravého okraje okna prohlížeče).
Pro ukázku pevné polohování vytvořili jsme kontejner o výšce 2000 pixelů. Pokud nyní posouváme stránku, náš postranní panel zůstane na svém místě, ale obsah kontejneru (hlavní obsah) se bude posouvat.
Výsledek našeho příkladu:
Statické polohování
No, konečný typ umístění je statické polohování (statický), vy a já jsme o tom již několikrát mluvili. Statické polohování je to klasické v proudu HTML dokument
Rád bych vás upozornil na jednu skutečnost, že výše diskutované vlastnosti, které jsou zodpovědné za přemístění prvků, nelze použít na prvky, které mají statické polohování , to znamená, že mají polohování, které je standardně nastaveno.
Pokročilé absolutní polohování
Než přejdete k pokročilým aplikacím absolutní umístění , chci vás upozornit na skutečnost, že pokud si nenaznačovat hodnota vertikální polohy prvku s absolutní umístění (nahoře nebo dole), nebo naopak do vodorovné polohy (vlevo nebo vpravo), pak prohlížeč ponechá prvek na stejném místě na stránce, kde je v obecném toku (bude umístěn nad obsahem, pokud nějaký existuje).
Už jsme se naučili, že prvek s absolutní umístění (pozice: absolutní) umístěno vzhledem k dané hraně svého předka a předek musí mít hodnotovou pozici odlišné od výchozího nastavení -statický v opačném případě bude provedeno počítání (posun). vzhledem k určenému okraji okna prohlížeče . Je čas podívat se na příklad, jako je tento:
</span> Absolutní umístění vzhledem k předkovi
relativní
třída = "kontejner" > kontejner
třída = "absolutní" > absolutní
Podívejme se blíže na to, co jsme udělali v tomto příkladu:
Nejprve jsme umístili blok (prvek ), který má
relativní umístění . Zadali jsme pro něj vnitřní okraj shora (margin-top) rovný 100 pixelům, nastavili šířku, výšku a barvu pozadí.
Dále byl do něj umístěn blokový prvek (element ), který má výšku 100 pixelů a barvu pozadí
žlutá . Jak jste pochopili, tento prvek má
statické polohování (výchozí hodnota) od hodnoty vlastnosti position
nedědil a nezdědil z nadřazeného bloku
relativní umístění .
Poté jsme umístili do naší nádoby s statické polohování prvek, který má absolutní umístění . Nastavte jeho šířku a výšku na 50 pixelů a barvu pozadí Červené . Nejdůležitějším bodem je, že tento prvek není umístěn vzhledem k oknu prohlížeče, nikoli vzhledem k rodičovskému prvku, ale relativně k jeho předkovi, který má jiné než statické umístění! V důsledku toho jsme umístili náš prvek do pravého horního rohu jeho předka s relativní umístění .
Výsledek našeho příkladu:
Pojďme si shrnout, co jsme se naučili v tomto výukovém článku o umístění prvků:
Statické polohování je to klasické umístění prvků shora dolů (položky se zobrazují v pořadí, v jakém jsou uvedeny v proudu dokumentu HTML ), je považována za výchozí hodnotu pro všechny prvky.Prvek je umístěn vzhledem k oknu prohlížeče pokud má pevné polohování (prvek je při rolování dokumentu pevný).
Prvek je umístěn vzhledem k oknu prohlížeče pokud má absolutní umístění a on není vnořeno do prvku, který má jiné umístění než statický
.
Prvek, pro který je nastaven relativní umístění směny vzhledem k pozici v toku dokumentů (vzhledem k jeho aktuální pozici ).
Prvek je umístěn vzhledem ke stranám jiného prvku v případě, že on má předka nebo rodiče absolutní , relativní nebo pevný polohování .
Otázky a úkoly k tématu
Než přejdete k dalšímu tématu, dokončete cvičný úkol:
2016-2019 Denis Bolshakov, můžete posílat komentáře a návrhy na web na adresu [email protected]
Jak zarovnat obrázek doprava
Dlouhý odstavec s několika větami. Obsahuje text popisující označenou vlastnost a obrázek, který má být přitlačen k okraji pravé strany.
Vyjme prvek z toku a posune jej k okraji levé nebo pravé strany rodiče. Prvky a text umístěný v kódu po prvku float obtékají na opačné straně.
Není zděděno, platí pro všechny prvky. vyjme prvek z toku a umístí jej na zbytek obsahu. Lze jej přesunout vzhledem k hranicím jeho rodiče, který má hodnotu pozice jinou než static , pomocí vlastností top , right , bottom , left . Když směr: ltr; vlastnost left má přednost před vlastností right, pokud není vlastnost left nastavena na auto .
Dlouhý odstavec s několika větami.
Obsahuje text popisující označenou vlastnost a obrázek, který má být přitlačen k okraji pravé strany.
Vlastnictví
zarovnání textu zděděné, aplikované na prvky bloku.
Vodorovně zarovná všechny obsažené vložené prvky a text. Neposouvá samotný prvek ani bloky a nefunguje, pokud je dán vloženému prvku. Má několik významů, včetně
že jo, což vám umožní přesunout obsah doprava.
Vlastnictví
okraj-levý není zděděno, platí pro všechny prvky.
Má to význam
auto, která zarovná prvek bloku vodorovně. A to
okraj-levý: auto; posune prvek k pravému okraji rodiče. Tuto polohu může nemovitost změnit
okraj-pravý..html">Kdy
okraj-levý: auto; A
pravý okraj: auto; prvek je umístěn na střed na šířku předka.
Vlastnictví
plovák není zděděno, platí pro všechny prvky.
Vyjme prvek z toku a posune jej k okraji levé nebo pravé strany rodiče. Prvky a text umístěný v kódu po prvku float obtékají na opačné straně.
Vlastnictví
pozice není zděděno, platí pro všechny prvky.
pozice: absolutní; vyjme prvek z toku a umístí jej na zbytek obsahu. Může být posunut relativně k hranicím rodiče, jehož hodnota
pozice odlišný od
statický, pomocí vlastností
horní,
že jo,
dno,
vlevo, odjet. Na
směr: ltr; vlastnictví
vlevo, odjet má přednost před majetkem
že jo, kromě případů, kdy majetek
vlevo, odjet má význam
auto.
Vlastnictví Zobrazit není zděděno, platí pro všechny prvky..html">tag stůl, A tabulka-buňka — td.
Rada: na
v tomto příkladu Je zajímavé vidět, jak se obrázek chová, když se zmenší velikost okna prohlížeče.
Jak zarovnat text doprava
Krátký text vpravo
Krátký text vpravo
Související materiály:
vodorovné zarovnání html aktualizováno html odůvodnění chcete aktualizovat
Jak zarovnat blok doprava
Prvek neovlivňuje výšku ani šířku nadřazeného prvku ani nezpůsobuje jeho přetečení.
Prvek neovlivňuje výšku nadřazeného prvku, pokud není plovák uvolněn.
Jak zarovnat více bloků doprava
okraj: 0 100 % 0 -100 %;
/* nemusíte přidávat další obal, ale v předchozím stylu zadejte transform: translate(-100%, 0); */ pozadí:zelené; )
CSS zachází s rozložením dokumentu HTML jako se stromem prvků. Zavolá se jedinečný prvek, který nemá žádný nadřazený prvek vykořenit živel. Modul CSS Positioning popisuje, jak lze umístit kterýkoli z prvků bez ohledu na pořadí dokumentu (tj. vyjmout z „toku“).
V CSS2 každý prvek ve stromu dokumentu generuje nula nebo více políček podle modelu krabice. Modul CSS3 doplňuje a rozšiřuje schéma polohování. Umístění těchto bloků je regulováno:
velikost a typ prvku,
polohovací schéma (normální průtok, průtok a absolutní polohování),
vztahy mezi prvky ve stromu dokumentu,
externí informace (například velikost výřezu, vnitřní rozměry obrázku atd.).
Polohovací schémata
V CSS lze blok prvku umístit podle tří schémat umístění:
1. Normální průtok
Normální tok zahrnuje kontext formátování bloku (prvky s blokem zobrazení , položkou seznamu nebo tabulkou ), vložený kontext formátování (prvky se zobrazením vloženým blokem , vloženým blokem nebo vloženou tabulkou ) a relativní a pevné umístění prvků na úrovni bloku a linky.
2. Obtékat
V modelu proudění je blok odstraněn z normálního proudění a umístěn doleva nebo doprava. Obsah obtéká pravou stranu prvku s float: left a levou stranu prvku s float: right .
3. Absolutní polohování
V modelu absolutního polohování je blok zcela odstraněn z normálního toku a je mu přidělena poloha vzhledem k bloku, který jej obsahuje. Absolutní polohování je implementováno pomocí hodnot position: absolute; a poloha: pevná; .
Prvek „mimo proudu“ může být plovoucí prvek, absolutně umístěný prvek nebo kořenový prvek.
Obecně řečeno, obsahující blok je blok, který obsahuje další prvek. V případě normálního toku je kořenový prvek html obsahujícím blokem pro prvek body, který je zase obsahujícím blokem pro všechny jeho podřízené prvky a tak dále. V případě polohování je obsah bloku zcela závislý na typu polohování.
Pro nekořenový prvek s pozicí: static; nebo poloha: relativní; jeho obsahující blok je tvořen okrajem oblasti obsahu nejbližšího nadřazeného bloku na úrovni bloku, buňky tabulky nebo bloku na úrovni řádku.
Pro nekořenový prvek s pozicí: absolutní; jeho obsahující blok je nastaven na nejbližší nadřazený prvek s hodnotou pozice jinou než statickou, jako je tato:
pokud je předkem prvek na úrovni bloku, obsahující blok bude oblast obsahu plus výplň prvku ;
pokud je předkem prvek na úrovni řádku, obsahující blok bude oblast obsahu;
pokud neexistují žádní předci, pak je blok obsahující prvek definován jako počáteční obsahující blok.
U „lepivého“ bloku je obsahující blok nejbližším předkem rolovatelného nebo výřezu, jinak.
2. Výběr schématu umístění: vlastnost position
Vlastnost position určuje, který polohovací algoritmus se použije k výpočtu polohy bloku.
Nemovitost se nedědí.
pozice
Význam:
statický
Blok je umístěn podle normálního průtoku. Vlastnosti nahoře, vpravo, dole a vlevo nejsou použity. Výchozí hodnota.
relativní
Poloha bloku se vypočítá podle normálního průtoku. Blok je poté odsazen od své normální polohy a ve všech případech, včetně prvků tabulky, neovlivňuje polohu žádných následujících bloků. Takový posun však může mít za následek překrývající se bloky a také posuvník, pokud dojde k přetečení. Relativně umístěný blok si zachovává své rozměry, včetně zalomení řádků a prostoru pro něj původně vyhrazeného.
Relativně umístěný blok vytvoří nový obsahující blok pro své absolutně umístěné potomky.
Pozice vlivu: relativní; na prvcích tabulky je definován takto:
absolutní
Pozice bloku (a možná i velikost) se určuje pomocí vlastností top , right , bottom a left. Tyto vlastnosti definují explicitní offset vzhledem k bloku, který obsahuje. Absolutně umístěné bloky jsou zcela odstraněny z normálního toku bez ovlivnění umístění sesterských prvků. Okraje absolutně umístěných bloků se nezhroutí.
Absolutně umístěný blok vytvoří nový obsahující blok pro děti s normálním tokem a děti s pozicí: absolutní; .
Obsah absolutně umístěného prvku nemůže obtékat jiné bloky. Absolutně umístěný blok může skrýt obsah jiného bloku (nebo může být sám skrytý), v závislosti na hodnotě z-indexu překrývajících se bloků.
lepkavý
Poloha bloku se vypočítá podle normálního průtoku. Blok je pak posunut vzhledem k nejbližšímu rolovacímu předkovi nebo výřezu, pokud žádný z předků nemá rolování. Lepivý blok může překrývat jiné bloky a také vytvářet posuvníky, pokud přeteče.
Lepicí blok si zachovává své rozměry, včetně zalomení řádků a prostoru pro něj původně vyhrazeného.
Lepivý blok vytváří nový blok pro absolutně a relativně umístěné děti.
pevný
Pevné umístění je podobné absolutnímu umístění s tím rozdílem, že pro obsahující blok je nastaven výřez. Takový blok je zcela odstraněn z toku dokumentu a nemá žádnou polohu vzhledem k žádné části dokumentu. Pevné bloky se při posouvání dokumentu neposouvají. V tomto ohledu jsou podobné pevným obrázkům na pozadí. Při tisku se pevné bloky opakují na každé stránce, přičemž obsahující blok pro ně definuje oblast stránky. Bloky s pevnou pozicí, které jsou větší než oblast stránky, jsou oříznuty.
počáteční
Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit
Zdědí hodnotu vlastnosti z nadřazeného prvku.
Syntax
Poloha: statická; poloha: relativní; pozice: absolutní; poloha: lepivý; poloha: pevná; pozice: počáteční; pozice: zdědit;
3. Odsazení bloku: vlastnosti nahoře, vpravo, dole, vlevo
Prvek je považován za umístěný, pokud je jeho vlastnost position nastavena na něco jiného než static. Polohované prvky generují polohované bloky a lze je umístit podle následujících čtyř fyzikálních vlastností:
Syntax
Nahoře: 10px; nahoře: 2em; horní: 50 %; top:auto; nahoře: zdědit; nahoře: počáteční;
Vlastnost top určuje vzdálenost, o kterou je horní okraj absolutně umístěného bloku (v závislosti na jeho okraji) odsazen pod horním okrajem obsahujícího bloku. U relativně umístěných bloků určuje odsazení vzhledem k horní hraně samotného bloku (to znamená, že bloku je dána poloha v normálním toku a poté odsazení od této polohy podle této vlastnosti).
Syntax
Vpravo: -10px; vpravo: .5em; vpravo: -10 %; vpravo: auto; právo: zdědit; vpravo: počáteční;
Vlastnost right určuje vzdálenost, o kterou je pravý okraj absolutně umístěného bloku (s přihlédnutím k jeho okraji) odsazen doleva od pravého okraje obsahujícího bloku. U relativně umístěných bloků definuje odsazení vzhledem k pravému okraji samotného bloku.
Syntax
Dole: 50px; dole: -3em; dno: -50 %; dole: auto; dole: zdědit; dole: počáteční;
Vlastnost bottom určuje vzdálenost, o kterou je spodní okraj bloku posunut směrem nahoru vzhledem ke spodnímu okraji obsahujícího bloku. U relativně umístěných bloků definuje odsazení vzhledem ke spodní hraně samotného bloku.
Syntax
Vlevo: 50px; vlevo: 10em; vlevo: 20 %; vlevo: auto; vlevo: zdědit; vlevo: počáteční;
Vlastnost left určuje vzdálenost, o kterou je levá hrana odsazena doprava od levé hrany obsahujícího bloku. U relativně umístěných bloků definuje odsazení vzhledem k levému okraji samotného bloku.
Kladné hodnoty posouvají prvek dovnitř obsahujícího bloku a záporné hodnoty jej posunují mimo obsahující blok.
4. Obtékání: vlastnost float
Obtékání umožňuje blokům plavat vlevo nebo vpravo na aktuálním řádku. "Plovoucí blok" je posunut doleva nebo doprava, dokud se jeho vnější okraj nedotkne okraje obsahujícího bloku nebo vnějšího okraje jiného plovoucího bloku. Pokud existuje linková jednotka, externí nejlepší část plovoucí blok je zarovnán s horní částí aktuálního lineárního bloku.
Při použití vlastnosti float u prvků se doporučuje nastavit šířku. V prohlížeči tak vznikne prostor pro další obsah. Pokud není dostatek vodorovného prostoru pro plovoucí prvek, bude zatlačen dolů, dokud nezapadne. V tomto případě to ostatní prvky na úrovni bloku budou ignorovat a prvky na úrovni řádků se přesunou doprava nebo doleva, čímž pro ně uvolní místo a obtékají je.
Pravidla, kterými se řídí chování plovoucích stran, jsou popsána vlastností float.
Nemovitost se nedědí.
Syntax
Plavat vlevo; plovák: pravý; plovák: žádný; plavat: zdědit;
Plovoucí blok přebírá rozměry svého obsahu s přihlédnutím k odsazení a ohraničení. Horní a spodní okraje plovoucích prvků se nesbalí.
Plovoucí prvky mohou používat záporné okraje k přesunu mimo oblast obsahu svého nadřazeného prvku.
Vlastnost automaticky změní vypočítanou (v prohlížeči zobrazenou) hodnotu vlastnosti display na display: block pro následující hodnoty: inline , inline-block , table-row , table-row-group , table-column , table-column-group , tabulka-buňka, popis tabulky, skupina záhlaví tabulky, skupina zápatí tabulky. Hodnota inline-table se změní na table .
Tato vlastnost nemá žádný vliv na prvky s display: flex a display: inline-flex . Neplatí pro absolutně umístěné prvky.
Rýže. 3. Obtočte prvky
5. Řízení toku kolem plovoucích prvků: Vlastnost Clear
Vlastnost clear určuje, které strany bloku/bloků prvku by neměly sousedit s plovoucími bloky výše ve zdrojovém dokumentu. V CSS2 a CSS 2.1 se vlastnost vztahuje pouze na neplovoucí prvky na úrovni bloku.
Nemovitost se nedědí.
Syntax
Jasný: žádný; jasný: vlevo; jasný: pravý; jasné: obojí; jasný: zdědit;
Chcete-li zabránit zobrazení pozadí nebo ohraničení pod plovoucími prvky, použijte pravidlo (přetečení: skryté;).
6. Definování kontextu překrytí: vlastnost z-index
V CSS má každý blok pozici ve třech rozměrech. Kromě vodorovné a svislé polohy se bloky skládají podél osy Z na sebe. Poloha podél osy Z je zvláště důležitá, když se bloky vizuálně překrývají.
Rýže. 1. Poloha prvků podél osy Z
Pořadí, ve kterém je strom dokumentu vykreslen na obrazovce, je popsáno pomocí překryvný kontext . Každý blok patří do jednoho překryvného kontextu. Každý blok v daném kontextu překrytí má celočíselnou úroveň, což je jeho poloha na ose Z vzhledem k ostatním blokům ve stejném kontextu překrytí.
Bloky s vyššími úrovněmi se vždy objeví před bloky s nižšími úrovněmi a bloky se stejnou úrovní jsou uspořádány zdola nahoru podle pořadí prvků ve zdrojovém dokumentu. Box prvku má stejnou pozici jako jeho nadřazený box, pokud mu vlastnost z-index nedává jinou úroveň.
Vlastnost z-index umožňuje změnit způsob, jakým se prvky skládají na sebe.
Nemovitost se nedědí.
Syntax
Z-index: auto; z-index: 0; z-index: 5; z-index: 999; z-index: -1; z-index: zdědit; z-index: počáteční;
Svět bezplatných programů a užitečných tipů
