CSS3 Box Dimensionamento
Il CSS3 box-sizing proprietà permette di includere l'imbottitura e il bordo in larghezza totale di un elemento e l'altezza.
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
Senza il CSS3 box-sizing Proprietà
Per impostazione predefinita, la larghezza e l'altezza di un elemento è calcolato in questo modo:
larghezza + padding + border = larghezza effettiva di un elemento
altezza + padding + border = altezza effettiva di un elemento
Questo significa: Quando si imposta la larghezza / altezza di un elemento, l'elemento spesso appaiono più grande di quanto si è impostato (a causa di confine e padding dell'elemento vengono aggiunti alla larghezza / altezza specificata dell'elemento).
L'illustrazione seguente mostra due <div> elementi con la stessa larghezza e altezza specificati:
I due <div> elementi sopra finire con diverse dimensioni del risultato (perché div2 ha specificato una imbottitura):
Esempio
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Prova tu stesso " Così, per un lungo periodo di tempo gli sviluppatori web hanno specificato un più piccolo valore della larghezza di quello che volevano, perché dovevano sottrarre l'imbottitura e confini.
Con CSS3, il box-sizing proprietà risolve questo problema.
Con il CSS3 box-sizing Proprietà
Il CSS3 box-sizing proprietà permette di includere l'imbottitura e il bordo in larghezza totale di un elemento e l'altezza.
Se si imposta box-sizing: border-box; su un padding elemento e di frontiera sono inclusi nella larghezza e l'altezza:
Ecco lo stesso esempio di cui sopra, con box-sizing: border-box; aggiunto ad entrambi i <div> elementi:
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;
} Prova tu stesso " Poiché il risultato di utilizzare il box-sizing: border-box; è molto meglio, molti sviluppatori vogliono tutti gli elementi sulle loro pagine per lavorare in questo modo.
Il seguente codice garantisce che tutti gli elementi sono dimensionati in questo modo più intuitivo. Molti browser utilizzano già box-sizing: border-box; per molti elementi del modulo (ma non tutti - che è il motivo per cui gli ingressi e le aree di testo un aspetto diverso a width: 100%;).
L'applicazione di questo a tutti gli elementi è sicuro e saggio: