Ogni elemento di una pagina web è una scatola rettangolare. La proprietà display in CSS determina il comportamento di quel riquadro rettangolare. Ci sono solo una manciata di valori comunemente usati:
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 */ )
Il valore predefinito per tutti gli elementi è inline. La maggior parte dei "fogli di stile dell'agente utente" (gli stili predefiniti che il browser applica a tutti i siti) ripristina molti elementi su "blocca". Esaminiamo ciascuno di questi e quindi copriamo alcuni degli altri valori meno comuni.
In linea
Il valore predefinito per gli elementi. Pensa a elementi come , o e in che modo avvolgere il testo in quegli elementi all'interno di una stringa di testo non interrompe il flusso del testo.
L' elemento ha un bordo rosso di 1 pixel. Notare che si trova esattamente in linea con il resto del testo.
Un elemento inline accetterà margini e padding, ma l'elemento rimane inline come ci si potrebbe aspettare. Margine e riempimento spingeranno gli altri elementi solo in orizzontale, non in verticale.
Un elemento inline non accetterà heighte width. Lo ignorerà semplicemente.
Blocco in linea
Un elemento impostato su inline-blockè molto simile a inline in quanto verrà impostato in linea con il flusso naturale del testo (sulla "linea di base"). La differenza è che puoi impostare un widthe heightche verrà rispettato.
Bloccare
Un certo numero di elementi viene impostato blockdal foglio di stile UA del browser. Di solito sono elementi contenitore, come , e
. Anche testo "blocchi" come
e
. Gli elementi del livello di blocco non si trovano in linea ma li superano. Per impostazione predefinita (senza impostare una larghezza) occupano quanto più spazio orizzontale possibile.
I due elementi con i bordi rossi sono
s che sono elementi a livello di blocco. L' elemento tra di loro non si trova in linea perché i blocchi si rompono sotto gli elementi in linea.
Correre in
Innanzitutto, questa proprietà non funziona in Firefox. Si dice che le specifiche per esso non siano abbastanza ben definite. Per iniziare a capirlo, però, è come se volessi che un elemento di intestazione si trovi in linea con il testo sottostante. Fluttuarlo non funzionerà e nemmeno nient'altro, poiché non vuoi che l'intestazione sia un figlio dell'elemento di testo sottostante, vuoi che sia il suo elemento indipendente. Nei browser "di supporto", è così:
Non contarci, però.
Flexbox
La displayproprietà viene utilizzata anche per i nuovi metodi di layout fangled come Flexbox.
.header ( display: flex; )
Esistono alcune versioni precedenti della sintassi di flexbox, quindi consulta questo articolo per la sintassi nell'uso di flexbox con il miglior supporto del browser. Assicurati di vedere questa guida completa a Flexbox.
Flow-Root
Il flow-rootvalore visualizzato crea un nuovo "contesto di formattazione del blocco", ma per il resto è simile block. Un nuovo BFC aiuta con cose come la cancellazione di float, eliminando la necessità di hack per farlo.
.group ( display: flow-root; )
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
Cromo
Firefox
IE
Bordo
Safari
58
53
No
79
13
Mobile / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Griglia
Anche il layout della griglia verrà inizialmente impostato dalla proprietà display.
body ( display: grid; )
Ecco la nostra guida sul layout Grid, che include un grafico di supporto del browser.
Nessuna
Rimuove completamente l'elemento dalla pagina. Nota che mentre l'elemento è ancora nel DOM, viene rimosso visivamente e in qualsiasi altro modo concepibile (non puoi tabulare su di esso o sui suoi figli, viene ignorato dagli screen reader, ecc.).
Valori della tabella
C'è un intero set di valori di visualizzazione che costringono gli elementi non di tabella a comportarsi come elementi di tabella, se è necessario che ciò accada. È raro, ma a volte ti consente di essere "più semantico" con il tuo codice mentre utilizzi i poteri di posizionamento unici delle tabelle.
