Každý prvok na webovej stránke je obdĺžnikový rámček. Vlastnosť display v CSS určuje, ako sa dané obdĺžnikové pole bude správať. Existuje iba niekoľko hodnôt, ktoré sa bežne 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 */ )
Predvolená hodnota pre všetky prvky je vložená. Väčšina „šablón štýlov používateľských agentov“ (predvolené štýly, ktoré používa prehliadač na všetkých stránkach) resetuje mnoho prvkov na „blokovanie“. Prejdime si každú z nich a potom si priblížime niektoré z ďalších menej bežných hodnôt.
V rade
Predvolená hodnota pre prvky. Myslieť na prvky, ako sú , alebo aj ako balenie textu v týchto prvkov v rámci textový reťazec nepraská tok textu.
Prvok má 1px červený rámček. Všimnite si, že sedí priamo v rade so zvyškom textu.
Vložený prvok prijme okraj a výplň, ale prvok stále sedí vložený, ako by ste čakali. Okraj a polstrovanie posunú ďalšie prvky iba vodorovne, nie zvisle.
Vložený prvok nebude akceptovať heighta width. Iba to bude ignorovať.
Vložený blok
Nastavený prvok inline-blockje veľmi podobný vloženému, pretože bude vložený s prirodzeným tokom textu (na „základnej čiare“). Rozdiel je v tom, že ste schopní nastaviť a widtha heightktoré budú rešpektované.
Blokovať
Na blockštýl prvkov prehliadača UA je nastavených niekoľko prvkov . Bývajú kontajnerové prvky, ako je , a
. Odošlite aj text „bloky“ ako
a
. Prvky na úrovni blokov nesedia priamo, ale prerážajú ich. Štandardne (bez nastavenia šírky) zaberajú čo najviac vodorovného priestoru.
Dva prvky s červenými okrajmi sú
s, ktoré sú prvkami na úrovni blokov. Prvkom medzi nimi nesedí inline pretože bloky rozbiť dole inline prvkov.
Zábeh
Po prvé, táto vlastnosť nefunguje vo Firefoxe. Hovorí sa, že špecifikácia nie je dostatočne definovaná. Ak tomu však začnete rozumieť, je to, akoby ste chceli, aby prvok hlavičky sedel v rade s textom pod ním. Plávajúce to nebude fungovať a nebude to robiť nič iné, pretože nechcete, aby bola hlavička podriadeným textovým prvkom pod ňou, chcete, aby to bol jej vlastný nezávislý prvok. Pri „podpore“ prehľadávačov je to takto:
S tým však nepočítajte.
Flexbox
displayNehnuteľnosť je tiež používaný pre nové fangled metód rozvrhnutie ako flexboxu.
.header ( display: flex; )
Existuje niekoľko starších verzií syntaxe flexboxu, preto si prečítajte tento článok o syntaxi používania flexboxu s najlepšou podporou prehľadávača. Určite si prečítajte tohto kompletného sprievodcu programom Flexbox.
Flow-Root
flow-rootZobrazená hodnota vytvorí nový blok "formátovanie kontext", ale inak podobné block. Nový BFC pomáha pri veciach, ako je čistenie plavákov, a odstraňuje potrebu hackerov, ktorí to robia.
.group ( display: flow-root; )
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
Chrome
Firefox
IE
Hrana
Safari
58
53
Nie
79
13
Mobil / tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Mriežka
Vlastnosť zobrazenia tiež pôvodne nastaví rozloženie mriežky.
body ( display: grid; )
Tu je náš sprievodca rozložením mriežky, ktorý obsahuje tabuľku podpory prehľadávača.
Žiadne
Úplne odstráni prvok zo stránky. Všimnite si, že zatiaľ čo je element stále v DOM, je vizuálne odstránený a iným mysliteľným spôsobom (nemôžete ho tablovať ani s jeho potomkami, prehliadače obrazovky ho ignorujú atď.).
Hodnoty tabuľky
Existuje celá sada zobrazovaných hodnôt, ktoré nútia prvky mimo tabuľky, aby sa správali ako prvky tabuľky, ak to potrebujete. Je to zriedkavé, ale niekedy vám to umožní byť „sémantickejší“ so svojím kódom pri využití jedinečných pozičných schopností tabuliek.
