Proprietà Display CSS | Spiegato
Visualizza proprietà
Come suggerisce il nome, la proprietà Visualizza CSS definisce come vengono visualizzati gli elementi HTML in una pagina Web. Questa proprietà può essere di grande utilità quando si desidera cambiare il solito comportamento di un elemento HTML. Supponiamo, per qualche motivo che desideri scambiare lo stato di un elemento in linea con quello di un elemento a livello di blocco, è possibile utilizzare questa proprietà per renderlo questa modifica.
Sintassi
Visualizza: valore;Qui abbiamo dimostrato alcuni valori di proprietà per la tua migliore comprensione.
Elementi in linea
Gli elementi che consumano solo la quantità richiesta di spazio sono chiamati elementi in linea. Possono anche essere indicati come elementi che vengono visualizzati in una linea.Questi elementi non partono da una nuova linea, inoltre, puoi posizionare più elementi in linea nella stessa linea. Alcuni esempi sono ,, ecc.
Come convertire gli elementi a livello di blocco in elementi in linea utilizzando la proprietà di visualizzazione
In questo esempio stiamo creando tre elementi e impostando il valore della proprietà di visualizzazione come "in linea", pertanto tutti gli elementi verranno visualizzati in una singola riga e consumano solo la quantità di spazio richiesto.
Produzione
Sebbene l'elemento per impostazione predefinita sia un elemento a livello di blocco, ma quando si imposta il valore della proprietà di visualizzazione su "inline" si comporterà come un elemento in linea.
Elementi a livello di blocco
Gli elementi che consumano tutto lo spazio disponibili (da sinistra a destra) e iniziano da una nuova linea sono considerati elementi a livello di blocco. Gli elementi a livello di blocco sono in grado di contenere elementi in linea insieme ad altri elementi a livello di blocco. La maggior parte degli elementi in HTML sono elementi a livello di blocco. Alcuni esempi lo sono ,
- ,
- elemento.
, eccetera.
Come convertire gli elementi in linea in elementi a livello di blocco utilizzando la proprietà di visualizzazione
Per motivi di questo esempio, considereremo due elementi e imposteremo il valore della proprietà di visualizzazione su "bloccare". Di conseguenza, entrambi gli elementi consumano l'intero spazio orizzontale, fungendo da elementi a livello di blocco. Sebbene l'elemento per impostazione predefinita sia un elemento in linea.
Produzione
Display flex
Questo valore regola in modo efficiente gli elementi all'interno di un contenitore. Distribuisce ugualmente lo spazio tra gli elementi presenti in un contenitore.
Come funziona il valore flessibile della proprietà display
In questo esempio, abbiamo illustrato il valore flessibile della proprietà di visualizzazione. Ne abbiamo creati cinque
elementi all'interno di un elemento con classe Flex-container e abbiamo assegnato il valore "flex" alla proprietà del display del
elementi.
Produzione
Display a griglia
Il valore della griglia della proprietà display è utile quando si dispone di elementi sotto forma di una griglia, inoltre, quando si utilizza la griglia non è necessario utilizzare i galleggianti e il posizionamento.
Come funziona il valore della griglia della proprietà display
In questo esempio, abbiamo creato sei elementi all'interno di un elemento più grande con la rete di classe di classe e abbiamo assegnato un valore "griglia" alla proprietà del display del
elementi
Produzione
Esistono numerosi altri valori che possono essere assegnati alla proprietà del display che sono i seguenti.
| Valore | Descrizione | |||||||||||||||||||||||
| in linea | Questo valore visualizza elementi come elementi in linea. | |||||||||||||||||||||||
| bloccare | Questo valore visualizza elementi come elementi a livello di blocco. | |||||||||||||||||||||||
| Contenuti | Questo valore fa scomparire un contenitore. | |||||||||||||||||||||||
| flettere | Questo valore visualizza elementi come contenitori flessibili a livello di blocco. | |||||||||||||||||||||||
| griglia | Questo valore visualizza elementi come contenitori della griglia a livello di blocco. | |||||||||||||||||||||||
| blocco inline | Questo valore visualizza elementi come contenitori a blocchi di livello in linea. | |||||||||||||||||||||||
| inline-flex | Questo valore visualizza elementi come contenitori flessibili in linea. | |||||||||||||||||||||||
| inline-grid | Questo valore visualizza elementi come contenitori a griglia di livello in linea. | |||||||||||||||||||||||
| tabella in linea | Questo valore visualizza le tabelle di livello in linea. | |||||||||||||||||||||||
| Elenco-Item | Questo valore visualizza tutti gli elementi in un | |||||||||||||||||||||||
| correre in | Questo valore sulla base del contesto visualizza elementi come elementi in linea o a livello di blocco. | |||||||||||||||||||||||
| tavolo | Questo valore rende gli elementi da comportarsi come
Per una migliore comprensione, puoi provare alcuni altri valori di proprietà per vedere come funzionano. Conclusione La proprietà del display CSS definisce come gli elementi HTML vengono visualizzati in una pagina Web, inoltre, utilizzando questa proprietà è possibile modificare il comportamento predefinito di un elemento HTML, ad esempio, è possibile far sì che un elemento in linea si comportasse come elemento a livello di blocco e viceversa. Esiste una vasta gamma di valori che è possibile applicare alla proprietà del display, ognuno con uno scopo diverso. In questo articolo, la proprietà del display viene discussa in profondità insieme a esempi adeguati. |