Dimensioni della scatola CSS
Dimensioni della scatola CSS
La proprietà CSS box-sizingci consente di includere il riempimento e il bordo nella larghezza e nell'altezza totali di un elemento.
Senza la proprietà di ridimensionamento della casella CSS
Per impostazione predefinita, la larghezza e l'altezza di un elemento vengono calcolate in questo modo:
larghezza + riempimento + bordo = larghezza effettiva di un elemento
altezza + riempimento + bordo = altezza effettiva di un elemento
Ciò significa: quando imposti la larghezza/altezza di un elemento, l'elemento appare spesso più grande di quanto hai impostato (perché il bordo e il riempimento dell'elemento vengono aggiunti alla larghezza/altezza specificata dell'elemento).
L'illustrazione seguente mostra due elementi <div> con la stessa larghezza e altezza specificate:
I due elementi <div> sopra finiscono con dimensioni diverse nel risultato (perché div2 ha un riempimento specificato):
Esempio
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
La box-sizingstruttura risolve questo problema.
Con la proprietà box-sizing CSS
La box-sizingproprietà ci consente di includere l'imbottitura e il bordo nella larghezza e nell'altezza totali di un elemento.
Se imposti box-sizing: border-box;un elemento, il riempimento e il bordo sono inclusi nella larghezza e nell'altezza:
Ecco lo stesso esempio di sopra, con box-sizing: border-box;
l'aggiunta di entrambi gli elementi <div>:
Esempio
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Poiché il risultato dell'utilizzo di box-sizing: border-box;è molto migliore, molti sviluppatori vogliono che tutti gli elementi delle loro pagine funzionino in questo modo.
Il codice seguente garantisce che tutti gli elementi siano dimensionati in questo modo più intuitivo. Molti browser utilizzano già box-sizing: border-box;molti elementi del modulo (ma non tutti, motivo per cui gli input e le aree di testo hanno un aspetto diverso in larghezza: 100%;).
Applicare questo a tutti gli elementi è sicuro e saggio:
Esempio
* {
box-sizing: border-box;
}
Proprietà di dimensionamento della scatola CSS
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |