Každý prvek na webové stránce je obdélníkový rámeček. Vlastnost zobrazení v CSS určuje, jak se dané obdélníkové pole chová. Existuje jen několik hodnot, které se běžně používají:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Výchozí hodnota pro všechny prvky je vložená. Většina „šablon stylů uživatelských agentů“ (výchozí styly, které prohlížeč použije pro všechny weby) resetuje mnoho prvků na „blokování“. Pojďme si projít každou z nich a poté pojďme pokrýt některé další méně běžné hodnoty.
V souladu
Výchozí hodnota pro prvky. Myslet na prvky, jako jsou , nebo i jak balení textu v těchto prvků v rámci textový řetězec nepraská tok textu.
Prvek má 1px červený rámeček. Všimněte si, že sedí přímo v řádku se zbytkem textu.
Vložený prvek přijme okraj a výplň, ale prvek stále sedí vložený, jak byste očekávali. Okraj a polstrování posunou ostatní prvky pouze vodorovně, nikoli svisle.
Vložený prvek nepřijme heighta width. Prostě to bude ignorovat.
Vložený blok
Prvek nastavený na inline-blockje velmi podobný inline v tom, že bude nastaven inline s přirozeným tokem textu (na „účaří“). Rozdíl je v tom, že jste schopni nastavit widtha, heightcož bude respektováno.
Blok
Řada prvků je nastavena blockpomocí šablony stylů UA prohlížeče. Bývají kontejnerové prvky, jako je , a
. Také text „bloky“ jako
a
. Prvky na úrovni bloku nesedí inline, ale prolomí se kolem nich. Ve výchozím nastavení (bez nastavení šířky) zabírají co nejvíce vodorovného prostoru.
Dva prvky s červenými okraji jsou
s, což jsou prvky na úrovni bloku. Prvkem mezi nimi nesedí inline protože bloky rozbít dole inline prvků.
Běžet
Nejprve tato vlastnost ve Firefoxu nefunguje. Slovo je, že jeho specifikace není dostatečně dobře definována. Abychom tomu začali rozumět, je to, jako kdybyste chtěli, aby prvek záhlaví seděl přímo s textem pod ním. Plovoucí to nebude fungovat a ani nic jiného, protože nechcete, aby záhlaví bylo podřízeným textovým prvkem pod ním, chcete, aby to byl jeho vlastní nezávislý prvek. V „podpůrných“ prohlížečích je to takto:
Nepočítejte s tím.
Flexbox
displayNemovitost je také používán pro nové fangled metod rozvržení jako flexboxu.
.header ( display: flex; )
Existují některé starší verze syntaxe flexboxu, proto si v tomto článku přečtěte syntaxi používání flexboxu s nejlepší podporou prohlížeče. Nezapomeňte si přečíst tohoto úplného průvodce Flexboxem.
Flow-Root
flow-rootZobrazená hodnota vytvoří nový blok „formátování kontext“, ale jinak podobné block. Nový BFC pomáhá s věcmi, jako je čištění plováků, což eliminuje potřebu hacků.
.group ( display: flow-root; )
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
Chrome
Firefox
TJ
Okraj
Safari
58
53
Ne
79
13
Mobilní / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Mřížka
Rozložení mřížky bude také původně nastaveno vlastností zobrazení.
body ( display: grid; )
Tady je náš průvodce rozložením mřížky, který obsahuje graf podpory prohlížeče.
Žádný
Úplně odebere prvek ze stránky. Všimněte si, že zatímco je prvek stále v DOM, je vizuálně a jakýmkoli jiným myslitelným způsobem odstraněn (nemůžete na něj ani na jeho podřízené karty, čtečky obrazovky ho ignorují atd.).
Hodnoty tabulky
Existuje celá sada zobrazovaných hodnot, které přinutí jiné než tabulkové prvky, aby se chovaly jako tabulkové prvky, pokud to potřebujete. Je to vzácné, ale někdy vám to umožní být „sémantičtější“ s vaším kódem při využití jedinečných pozičních schopností tabulek.
