Home-theater-designers
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.
FARE USO DEL VIDEO DEL GIORNO
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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</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.
come formattare un'unità flash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.
Nascondi elementi del sito Web con visualizzazione CSS: nessuno
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.
4B8553AF011488B693BBC238B69A5F102CFFFFAFPosiziona 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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="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 un elemento HTML
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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</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 distribuzione di contenuti come Shopify o WordPress, ma può anche essere utile per il web design generale.