Esempio
Specificare che <div> elementi dovrebbero avere padding e border inclusi nella larghezza totale dell'elemento e l'altezza:
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà box-sizing viene utilizzato per indicare al browser quali sono le proprietà di ridimensionamento (width and height) dovrebbero includere.
Dovrebbero includere il confine-box? O semplicemente il contenuto-contenitore (che è il valore di default delle proprietà di larghezza e altezza)?
| Valore di default: | content-box |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.boxSizing="border-box" Try it |
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.2 -webkit- | 9.5 |
CSS Sintassi
box-sizing: content-box|border-box|initial|inherit;I valori delle proprietà
| Valore | Descrizione |
|---|---|
| content-box | Predefinito. Le proprietà di larghezza e altezza (and min/max properties) comprende solo il contenuto. Border, padding, o margini non sono inclusi |
| border-box | Le proprietà di larghezza e altezza (and min/max properties) include contenuti, imbottitura e di confine, ma non il margine |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Specificare due delimitato lato box a fianco:
div
{
box-sizing: border-box;
width: 50%;
float: left;
}
Prova tu stesso " Pagine correlate
CSS3 tutorial: CSS3 Box Dimensionamento
Di riferimento HTML DOM: boxSizing property