formato della scatola CSS3
CSS3 box-sizing di proprietà per impostare la larghezza e l'altezza attributi contiene padding (imbottitura) e il confine (border).
Supporto per il browser
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione di proprietà.
Subito dopo il browser il numero -webkit- o il prefisso -moz- specificato.
| proprietà | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8.0 | 29,0 2.0 -moz- | 5.1 3.1 -webkit- | 9.5 |
Non utilizzare la proprietà CSS3 box-sizing
Per default, la larghezza e l'elemento di calcolo modo high-end è il seguente:
larghezza (larghezza) + padding (padding) + confine (border) = elementi larghezza attuale
altezza (altezza) + padding (padding) + confine (border) = altezza reale dell'elemento
Ciò significa che quando abbiamo impostato la larghezza / altezza dell'elemento, l'altezza del display dell'elemento e la larghezza sarebbe stato più grande (a causa di elemento di confine con imbottitura calcolerà larghezza / altezza in).
Questi <div> elemento due, anche se la larghezza e l'altezza impostazioni uguali, ma la dimensione del vero e proprio show incoerente perché div2 imbottitura specificato:
Esempi
width: 300px;
altezza: 100px;
border: 1px solido blu;
}
.div2 {
width: 300px;
altezza: 100px;
padding: 50px;
border: 1px solid red;
}
Prova »
Se si desidera utilizzare questo metodo per ottenere la scatola più piccola e contiene al suo interno i margini, si deve prendere in considerazione il confine e all'interno della larghezza del margine.
Il CSS3 box-sizing proprietà una buona soluzione a questo problema.
Usa CSS3 proprietà box-sizing
CSS3 box-sizing attributo contiene padding (imbottitura) e il confine (border) in larghezza e altezza di un elemento.
Se si imposta sull'elemento box-sizing: border-box; l'imbottitura (imbottitura) e il confine (confine) è anche incluso nella larghezza e l'altezza:
Qui ci sono due <div> elemento viene aggiunto box-sizing: border-box; proprietà di un semplice esempio.
Esempi
width: 300px;
altezza: 100px;
border: 1px solido blu;
box-sizing: border-box;
}
.div2 {
width: 300px;
altezza: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Prova »
A giudicare dai risultati del box-sizing: border-box; i risultati migliori, ma è anche un sacco di sviluppatori hanno bisogno.
Il seguente codice può fare tutti gli elementi in un modo più intuitivo per visualizzare le dimensioni. Molti browser supportano già box-sizing: border-box; (ma non tutti - che è il motivo per cui gli elementi di input di testo e impostare la larghezza: 100%; la larghezza del post non è la stessa).
Tutti gli elementi che utilizzano box-sizing è più consigliabile: