#1 Vlasnost display
Jedna z nejdůležitějších vlastností v CSS, vlastnost display, určuje jakým způsobem se bude prvek zobrazovat a chovat v prostředí s ostatními prvky.
Kategorie
Vlastnost display může obsahovat více klíčových slov, která často vyjadřují odlišné chování od ostatních:
- inline / blok – dvě základní skupiny, které rozdělují HTML prvky podle toho, jak se chovají v okolí ostatních prvků
- viditelnost – speciální hodnota display: none;, která úplně skrývá prvek (na rozdíl od viditelnosti)
- rozložení – hodnota, která určuje jak se budou chovat vnořené prvky
#2 Inline a blok
Každý prvek se řadí do jedné z těchto dvou skupin, i když to nemusí být hned zjevné. Obě skupiny se často ani nedefinují, jelikož každý prvek má nějakou z dvou hodnot přednastavenou.
display: block;
display: inline;
Prvky, jenž patří do skupiny blok vždy začíná na novém řádku, vždy se snaží roztáhnout na co největší šířku a nedovoluje ostatním prvků být vedle něj. Na druhou stranu, prvky inline nezačínají na novém řádku, vkládají se vedle nebo do existujících prvků a zabírají pouze takovou šířku, jakou nutně potřebují.
#3 Viditelnost prvku
Samostatnou hodnotou vlastnosti display je display: none;, která definuje, že prvek se na stránce nijak nezobrazí. Pro koncového uživatele tak prvek neexistuje, i když je v kódu zapsaný. Následující kód určuje, že se všechny nadpisy druhé úrovně nebudou na stránce ukazovat.
h2 {
display: none;
}
S touto hodnotou souvisí vlastnost visibility, která taktéž definuje viditelnost prvku, ale prvek na stránce zůstává a zabírá na ní místo, i když je neviditelný. Více o této vlastnosti i rozdílech s display: none; se dozvíte v následující kapitole.
#4 Rozložení
Nejčastější hodnotou vlastnosti display jsou hodnoty, které určují, jak se budou vnořené prvky (prvky, které se nacházejí v prvku) chovat. Nejčastějšími hodnotami jsou flex a grid o obou píšeme v jejich relativních článcích – CSS flexbox a CSS grid.
Vlastnosti může však být definována také jiná hodnota. Často se jedná o automaticky přiřazené hodnoty jako je table (a příbuzné hodnoty) pro tabulky, list-item pro seznamy nebo developerem přiřazená hodnota contents, která způsobuje, že HTML ignoruje daný prvek a jako další úroveň bere vnořené prvky toho prvku.