4.1 Proprietà box-sizing
La proprietà box-sizing in CSS è uno strumento potente per gestire il modello di misurazione delle dimensioni degli elementi.
Definisce come vengono calcolate le dimensioni di un elemento, inclusa la larghezza e l'altezza, nonché margini, bordi e margini esterni.
Di seguito esamineremo in dettaglio come funziona box-sizing e come il suo utilizzo può influenzare il layout di una pagina web.
Modelli principali di box-sizing
Content-box (modello di contenuto)
Il valore content-box è il valore predefinito per tutti gli elementi. In questo modello le dimensioni dell'elemento
(width e height) determinano solo le dimensioni del contenuto, escludendo margini e bordi. Ciò significa che
margini e bordi vengono aggiunti alla larghezza e all'altezza complessive dell'elemento.
Border-box (modello di bordi)
Il valore border-box modifica il modello di misurazione in modo che le dimensioni dell'elemento (width e height)
includano margini e bordi. Ciò significa che margini e bordi fanno parte della larghezza e dell'altezza complessive dell'elemento,
semplificando i calcoli e la gestione delle dimensioni dell'elemento.
Esempio di utilizzo di box-sizing:
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: larghezza e altezza includono solo il contenuto.</div>
<div class="box border-box">Border-box: larghezza e altezza includono margini e bordi.</div>
Spiegazione del codice:
.box: stile di base per tutte le scatole, inclusi margini, bordi e dimensioni.content-box: elemento con box-sizing: content-box, dove larghezza e altezza includono solo il contenuto.border-box: elemento con box-sizing: border-box, dove larghezza e altezza includono margini e bordi
4.2 Impatto di box-sizing sul layout
Modello di contenuto (Content-box)
Quando si utilizza box-sizing: content-box;, margini e bordi vengono aggiunti alla larghezza e all'altezza complessive dell'elemento.
Ciò può portare alla necessità di ulteriori considerazioni quando si calcolano le dimensioni e il posizionamento degli elementi.
Esempio di utilizzo
In questo caso la larghezza complessiva dell'elemento sarà
200px + 20px (padding) * 2 + 5px (border) * 2 = 250px,
e l'altezza complessiva sarà 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: larghezza e altezza includono solo il contenuto.</div>
Modello di bordi (Border-box)
Quando si utilizza box-sizing: border-box;, margini e bordi sono inclusi nella larghezza e altezza specificate dell'elemento.
Ciò semplifica i calcoli e la gestione delle dimensioni dell'elemento, soprattutto quando si creano layout adattivi.
Esempio di utilizzo:
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: larghezza e altezza includono margini e bordi.</div>
4.3 Creazione di layout adattivi
L'utilizzo di box-sizing: border-box; consente di semplificare la creazione di layout adattivi, poiché
le dimensioni degli elementi includono margini e bordi, prevenendo fuoriuscite inaspettate.
Esempio di utilizzo:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
<div class="item">Elemento 4</div>
<div class="item">Elemento 5</div>
<div class="item">Elemento 6</div>
</div>
Spiegazione del codice:
* { box-sizing: border-box; }: applicare il modello di bordi a tutti gli elementi sulla pagina per semplificare la gestione delle dimensioni.container: Contenitore Flex con layout adattivo.item: Elementi Flex con distribuzione uniforme della larghezza e inclusione di padding e border nella larghezza complessiva
4.4 Dimensioni fisse con margini interni
L'utilizzo di box-sizing: border-box; consente di impostare facilmente dimensioni fisse per gli elementi
con margini interni, senza preoccuparsi di fuoriuscite.
Esempio di utilizzo:
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* Centrare il testo verticalmente */
}
<div class="fixed-size">
Dimensioni fisse
</div>
Spiegazione del codice:
.fixed-size: elemento con dimensioni fisse di 300x150 pixel, inclusi padding e border, che consente un controllo preciso delle sue dimensioni
GO TO FULL VERSION