La proprietà display CSS è un potente strumento per i web designer. Ti consente di controllare i layout degli elementi del sito Web con uno stile minimo, con valori semplici facili da ricordare.
Ma cosa fa ciascuno di questi valori e come funzionano? Scopriamolo.
Che cos'è la proprietà display CSS?
La proprietà display specifica il tipo di rendering del riquadro utilizzato per gli elementi HTML su una pagina Web. Ciò si traduce in una varietà di comportamenti, incluso il non presentarsi affatto. Puoi modificare questi valori sul tuo sito Web tramite il foglio di stile o le sezioni di personalizzazione CSS appropriate in Strumenti CMS come WordPress.
Mantieni gli elementi in linea con la visualizzazione CSS: inline
I valori di larghezza e altezza non si applicano a un elemento con visualizzazione in linea; il contenuto all'interno ne determina le dimensioni. Gli elementi HTML in linea possono stare fianco a fianco con altri elementi, comportandosi come a. La visualizzazione in linea è più comunemente usata per il testo.
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="utf-8">
<titolo>Valori di visualizzazione CSS</title>
<stile>
.in linea {
display: in linea;
dimensione del carattere: 3rem;
}
#inline-1 {
colore di sfondo: giallo;
imbottitura: 10px 0px 10px 10px;
}
#inline-2 {
colore di sfondo: verde chiaro;
riempimento: 10px 10px 10px 0px;
}
</style>
</head>
<corpo>
<h1>Visualizzazione CSS in linea</h1>
<classe div="in linea" id="inline-1">Questo è il testo</div>
<classe div="in linea" id="inline-2">con il valore della proprietà inline.</div>
</body>
</html>
Questo markup HTML e CSS sopra servono come un buon esempio del valore inline di visualizzazione. Se usato insieme, visualizzerà una singola riga di testo composta da due diversi elementi HTML.
Controllo layout sito web con visualizzazione CSS: blocco
In qualche modo, il valore del blocco di visualizzazione è l'opposto del valore inline. È possibile impostare le dimensioni di altezza e larghezza e gli elementi con questo valore non possono stare uno accanto all'altro. L'esempio sopra mostra due elementi con il valore del blocco. Gli elementi con il valore di visualizzazione del blocco per impostazione predefinita alla larghezza massima del loro elemento padre.
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="utf-8">
<titolo>Valori di visualizzazione CSS</title>
<stile>
.bloccare {
blocco di visualizzazione;
dimensione del carattere: 3rem;
larghezza: fit-content;
}
#blocco-1 {
colore di sfondo: giallo;
imbottitura: 10px 10px 10px 10px;
}
#blocco-2 {
colore di sfondo: verde chiaro;
imbottitura: 10px 10px 10px 10px;
}
</style>
</head>
<corpo>
<h1>Blocco di visualizzazione CSS</h1>
<classe div="bloccare" id="blocco-1">Questo è il testo</div>
<classe div="bloccare" id="blocco-2">con il valore della proprietà del blocco.</div>
</body>
</html>A differenza dell'esempio di stile inline, questo esempio di valore del blocco di visualizzazione divide le righe di testo in due righe diverse. Il valore fit-content width imposta la larghezza degli elementi in modo che corrisponda alla lunghezza del testo.
Elementi HTML affiancati con visualizzazione CSS: inline-block
Il valore CSS display inline-block funziona proprio come un normale valore inline, solo con la possibilità di aggiungere dimensioni specifiche. Ciò consente di creare layout simili a una griglia senza disporre di elementi padre in posizione. Tornando all'esempio precedente, l'aggiunta del valore inline-block consente agli elementi di sedersi uno accanto all'altro.
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="utf-8">
<titolo>Valori di visualizzazione CSS</title>
<stile>
.blocco in linea {
display: blocco in linea;
dimensione del carattere: 3rem;
larghezza: fit-content;
}
#inline-block-1 {
colore di sfondo: giallo;
imbottitura: 10px 10px 10px 10px;
}
#inline-block-2 {
colore di sfondo: verde chiaro;
imbottitura: 10px 10px 10px 10px;
}
</style>
</head>
<corpo>
<h1>CSS Display Inline-Block (larghezza impostata)</h1>
<classe div="blocco in linea" id="inline-block-1">Questo è il testo</div>
<classe div="blocco in linea" id="inline-block-2">con la proprietà inline-block
valore.</div>
</body>
</html>
Il valore inline-block non appare molto diverso dal valore inline. È importante notare che, tuttavia, è possibile impostare le dimensioni degli elementi con questo valore, semplificando il lavoro in alcuni casi.
Il valore visualizzato più semplice è "nessuno". Questo valore nasconde l'elemento e tutti gli elementi figlio, insieme ai margini e ad altre proprietà di spaziatura. Gli elementi con il valore CSS none sono ancora visibili all'interno degli ispettori del browser.
Crea elementi flessibili e reattivi con display CSS: flex
Display flex è una delle più recenti modalità di layout CSS. Quando display flex si trova su un elemento padre, tutti gli elementi al suo interno diventano elementi CSS flessibili. L'elemento padre in questa configurazione è un flexbox.
I Flexbox creano design reattivi con variabili predefinite, come larghezza e altezza. Ne vale la pena imparare a conoscere le Flexbox HTML/CSS prima di iniziare.
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="utf-8">
<titolo>Valori di visualizzazione CSS</title>
<stile>
.flettere {
display: flessibile;
dimensione del carattere: 3rem;
}
#flessibile-1 {
colore di sfondo: giallo;
larghezza: 40%;
altezza: 100px;
}
#flessibile-2 {
colore di sfondo: verde chiaro;
larghezza: 25%;
altezza: 100px;
}
#flessibile-3 {
colore di sfondo: azzurro;
larghezza: 35%;
altezza: 100px;
}
</style>
</head>
<corpo>
<h1>CSS Display Flex</h1>
<classe div="flettere">
<ID div="flessibile-1"></div>
<ID div="flessibile-2"></div>
<ID div="flessibile-3"></div>
</div>
</body>
</html>Posiziona Flexbox fianco a fianco Con display: inline-flex
Inline-flex si comporta proprio come un normale flexbox, con l'ulteriore vantaggio che l'elemento può sedersi accanto ad altri elementi.
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="utf-8">
<titolo>Valori di visualizzazione CSS</title>
<stile>
.inline-flex {
display: inline-flex;
dimensione del carattere: 3rem;
larghezza: 49.8%;
}
#inline-flex-1 {
colore di sfondo: giallo;
larghezza: 40%;
altezza: 100px;
}
#inline-flex-2 {
colore di sfondo: verde chiaro;
larghezza: 25%;
altezza: 100px;
}
#inline-flex-3 {
colore di sfondo: azzurro;
larghezza: 35%;
altezza: 100px;
}
</style>
</head>
<corpo>
<h1>CSS Display Inline-Flex</h1>
<classe div="inline-flex">
<ID div="inline-flex-1"></div>
<ID div="inline-flex-2"></div>
<ID div="inline-flex-3"></div>
</div>
<classe div="inline-flex">
<ID div="inline-flex-1"></div>
<ID div="inline-flex-2"></div>
<ID div="inline-flex-3"></div>
</div>
</body>
</html>Crea tabelle complesse con visualizzazione CSS: tabella
Il valore della tabella di visualizzazione ricorda i vecchi tempi della progettazione di siti Web. Sebbene la maggior parte dei siti Web non utilizzi oggi le tabelle per i propri layout, sono comunque valide per mostrare dati e contenuti in un formato leggibile.
L'aggiunta del valore della tabella a un elemento HTML lo farà agire come un elemento della tabella, ma sono necessari valori aggiuntivi per far funzionare correttamente la tabella.
Visualizzazione CSS: tabella-cella
Gli elementi con il valore della cella della tabella agiscono come singole celle all'interno della tabella principale. E i valori della colonna della tabella e della riga della tabella raggruppano insieme queste singole celle.
Visualizzazione CSS: riga di tabella
Il valore della riga della tabella funziona proprio come a
Visualizzazione CSS: tabella-colonna
Il valore della colonna della tabella funziona in modo simile al valore della riga della tabella, solo che non divide la tabella. Puoi invece utilizzare questo valore per aggiungere regole CSS specifiche alle diverse colonne già esistenti.
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="utf-8">
<titolo>Valori di visualizzazione CSS</title>
<stile>
.tavolo {
display: tavolo;
dimensione del carattere: 3rem;
}
.intestazione {
display: gruppo-intestazione-tabella;
dimensione del carattere: 3rem;
}
#colonna-1 {
display: tabella-gruppo-colonne;
colore di sfondo: giallo;
}
#colonna-2 {
display: tabella-gruppo-colonne;
colore di sfondo: verde chiaro;
}
#colonna-3 {
display: tabella-gruppo-colonne;
colore di sfondo: azzurro;
}
#riga-1 {
display: tabella-riga;
}
#riga-2 {
display: tabella-riga;
}
#riga-3 {
display: tabella-riga;
}
#cellula {
display: tabella-cella;
imbottitura: 10px;
larghezza: 20%;
}
</style>
</head>
<corpo>
<h1>Tabella di visualizzazione CSS</h1>
<classe div="tavolo">
<ID div="colonna-1"></div>
<ID div="colonna-2"></div>
<ID div="colonna-3"></div>
<classe div="intestazione">
<ID div="cellula">Nome</div>
<ID div="cellula">Età</div>
<ID div="cellula">Paese</div>
</div>
<ID div="riga-1">
<ID div="cellula">Jeff</div>
<ID div="cellula">21</div>
<ID div="cellula">Stati Uniti d'America</div>
</div>
<ID div="riga-2">
<ID div="cellula">Citare in giudizio</div>
<ID div="cellula">34</div>
<ID div="cellula">Spagna</div>
</div>
<ID div="riga-3">
<ID div="cellula">Boris</div>
<ID div="cellula">57</div>
<ID div="cellula">Singapore</div>
</div>
</div>
</body>
</html>Crea tabelle affiancate con visualizzazione CSS: inline-table
Come le altre varianti inline che abbiamo già visto, inline-table consente di posizionare gli elementi della tabella accanto ad altri elementi.
Crea layout di siti Web reattivi con display CSS: griglia
Il valore della griglia di visualizzazione CSS è simile al valore della tabella, solo le colonne e le righe di una griglia possono avere un dimensionamento flessibile. Questo rende le griglie ideali per creare il layout principale per le pagine web. Lasciano spazio per intestazioni e piè di pagina a larghezza intera e allo stesso tempo consentono di avere aree di contenuto di dimensioni diverse.
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="utf-8">
<titolo>Valori di visualizzazione CSS</title>
<stile>
.griglia {
visualizzazione: griglia;
dimensione del carattere: 3rem;
aree-modello-griglia:
'intestazione intestazione intestazione intestazione'
'contenuto della barra laterale sinistra barra laterale destra'
'piè di pagina piè di pagina piè di pagina';
divario: 10px;
}
#griglia-1 {
area della griglia: intestazione;
colore di sfondo: giallo;
altezza: 100px;
imbottitura: 20px;
allineamento testo: centro;
}
#griglia 2 {
area della griglia: barra laterale sinistra;
colore di sfondo: verde chiaro;
altezza: 200px;
imbottitura: 20px;
allineamento testo: centro;
}
#griglia-3 {
area della griglia: contenuto;
colore di sfondo: azzurro;
altezza: 200px;
imbottitura: 20px;
allineamento testo: centro;
}
#griglia-4 {
area della griglia: barra laterale destra;
colore di sfondo: verde chiaro;
altezza: 200px;
imbottitura: 20px;
allineamento testo: centro;
}
#griglia-5 {
area della griglia: piè di pagina;
colore di sfondo: giallo;
altezza: 100px;
imbottitura: 20px;
allineamento testo: centro;
}
</style>
</head>
<corpo>
<h1>Griglia di visualizzazione CSS</h1>
<classe div="griglia">
<ID div="griglia-1">Intestazione</div>
<ID div="griglia 2">Barra laterale sinistra</div>
<ID div="griglia-3">Contenuto</div>
<ID div="griglia-4">Barra laterale destra</div>
<ID div="griglia-5">Piè di pagina</div>
</div>
</body>
</html>
Le griglie sono simili alle flexbox, solo che possono posizionare elementi sotto e uno accanto all'altro. La proprietà grid-template-areas è vitale per questo. Come puoi vedere dal codice, l'intestazione e il piè di pagina occupano quattro spazi nell'array, poiché sono a larghezza intera. Le barre laterali occupano uno spazio ciascuna, mentre il contenuto ne occupa due, dividendo efficacemente la riga centrale della griglia in tre colonne.
Display CSS: griglia in linea
L'utilizzo del valore inline-grid consentirà alla griglia di sedersi accanto ad altri elementi, proprio come gli altri valori inline in questa guida.
Utilizzo di CSS Display per il Web Design
La proprietà di visualizzazione CSS offre un modo pratico per regolare le strutture degli elementi del sito Web senza dover modificare il markup HTML. Questo è l'ideale per coloro che utilizzano piattaforme di consegna dei contenuti come Shopify o WordPress, ma può anche essere utile per il web design generale.
