Fiecare element de pe o pagină web este o cutie dreptunghiulară. Proprietatea de afișare din CSS determină exact cum se comportă acea casetă dreptunghiulară. Există doar o mână de valori care sunt utilizate în mod obișnuit:
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 */ )
Valoarea implicită pentru toate elementele este inline. Majoritatea „foilor de stil ale agentului utilizatorului” (stilurile implicite pe care browserul le aplică tuturor site-urilor) resetează multe elemente pentru a „bloca”. Să parcurgem fiecare dintre acestea și apoi să acoperim unele dintre celelalte valori mai puțin comune.
In linie
Valoarea implicită pentru elemente. Gândiți-vă la elemente precum , sau sau cum înfășurarea textului în acele elemente într-un șir de text nu rupe fluxul textului.
Elementul are un chenar roșu 1px. Observați că se află în linie dreaptă cu restul textului.
Un element în linie acceptă marja și umplerea, dar elementul rămâne în linie așa cum v-ați putea aștepta. Marja și căptușeala vor împinge alte elemente doar pe orizontală, nu pe verticală.
Un element inline nu va accepta heightși width. Doar îl va ignora.
Bloc în linie
Un element setat la inline-blockeste foarte asemănător cu inline prin faptul că se va seta în linie cu fluxul natural al textului (pe „linia de bază”). Diferența este că sunteți capabil să setați un widthși heightcare va fi respectat.
bloc
Un număr de elemente sunt setate blockde foaia de stil UA a browserului. Acestea sunt , de obicei elemente container, cum ar fi , și
. De asemenea, scrieți „blocuri” ca.
și
. Elementele de nivel bloc nu stau în linie, ci trec de ele. În mod implicit (fără a seta o lățime) ocupă cât mai mult spațiu orizontal.
Cele două elemente cu chenarele roșii sunt
care sunt elemente la nivel de bloc. Elementul între ele nu sta in linie , deoarece blocurile descompun mai jos elemente inline.
A alerga în
În primul rând, această proprietate nu funcționează în Firefox. Cuvântul este că specificațiile pentru aceasta nu sunt suficient de bine definite. Pentru a începe să-l înțelegeți, este ca și cum doriți ca un element de antet să stea în linie cu textul de sub acesta. Flotarea nu va funcționa și nici altceva nu va funcționa, deoarece nu doriți ca antetul să fie un copil al elementului de text de sub acesta, doriți să fie propriul său element independent. În browserele „care acceptă”, este așa:
Totuși, nu conta pe asta.
Flexbox
displayProprietatea este , de asemenea , utilizat pentru noi metode de aspect fangled , cum ar fi flexbox.
.header ( display: flex; )
Există câteva versiuni mai vechi ale sintaxei flexbox, așa că vă rugăm să consultați acest articol pentru sintaxa utilizării flexbox cu cel mai bun suport pentru browser. Asigurați-vă că vedeți acest ghid complet pentru Flexbox.
Flux-rădăcină
Valoarea flow-rootafișată creează un nou „context de formatare a blocului”, dar este altfel asemănător block. Un nou BFC ajută la lucruri precum curățarea plutitorilor, eliminând necesitatea hacks pentru a face acest lucru.
.group ( display: flow-root; )
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
Crom
Firefox
IE
Margine
Safari
58
53
Nu
79
13
Mobil / Tabletă
Android Chrome
Android Firefox
Android
Safari iOS
88
85
81
13.0-13.1
Grilă
Aspectul grilei va fi, de asemenea, setat inițial de proprietatea afișajului.
body ( display: grid; )
Iată ghidul nostru privind aspectul grilei, care include o diagramă de asistență pentru browser.
Nici unul
Elimină complet elementul din pagină. Rețineți că, în timp ce elementul este încă în DOM, acesta este eliminat vizual și orice alt mod conceput (nu puteți face tab-uri pentru el sau copiii acestuia, este ignorat de cititoarele de ecran etc.).
Valorile tabelului
Există un set întreg de valori de afișare care forțează elementele care nu sunt de masă să se comporte ca elemente de masă, dacă este nevoie să se întâmple asta. Este rar, dar uneori îți permite să fii „mai semantic” cu codul tău în timp ce folosești puterile unice de poziționare ale tabelelor.
