Manuale di riferimento CSS

Regole @ CSS

Manuale completo delle proprietà CSS

Proprietà caption-side di CSS Proprietà box-shadow di CSS3

Metodo di utilizzo e esempio dell'attributo box-sizing CSS3

L'attributo box-sizing CSS viene utilizzato per modificare il valore predefinitoModello di scatola CSSIl browser di solito utilizza questo modello per calcolare la larghezza e l'altezza degli elementi.

La tabella sottostante fornisce una descrizione dell'uso e la cronologia delle versioni di questa proprietà, nonché la sintassi dell'uso in script JavaScript.

Valore predefinito:	content-box
Applicabile a:	Tutti gli elementi che accettano larghezza o altezza
Ereditarietà:	No
Animabile:	No Visualizza le proprietà animate.
Versione:	Nuova funzionalità del CSS3
Sintassi JavaScript:	object.style.boxSizing="border-box"

Sintassi dell'uso di box-sizing

La sintassi di questa proprietà è la seguente:

box-sizing:　content-box　|　padding-box　|　border-box　|　initial　|　inherit

L'esempio seguente dimostra come utilizzare la proprietà box-sizing.

Esempio

.box　{
　　　　width:　50%;
　　　　padding:　15px;
　　　　float:　left;
　　　　border:　5px　solid　#000;
　　　　box-sizing:　border-box;
}

Prova a vedere‹/›

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
content-box	I valori specificati per width e height includono solo il contenuto dell'elemento. Non includono riempimento, bordi o margini.
padding-box	I valori specificati per width e height includono la dimensione del riempimento, ma non includono border o margine.
border-box	I valori specificati per width e height includono il riempimento e i bordi, ma non includono il margine.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato utilizza il valore della proprietà box-sizing dell'elemento genitore.

Compatibilità del browser

La compatibilità del browser per la proprietà box-sizing, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.

	Firefox 2+ ^-moz-, 29+ Google Chrome 4+ ^-webkit-, 10+ Internet Explorer 8+ Apple Safari 3.2+ ^-webkit-, 5.1 + Opera 9.5+

Leggi di più

Si prega di consultare le guide relative ai seguenti contenuti:Modello Box del CSS,Dimensioni del CSS.

Proprietà correlate:padding,border,margin.

Proprietà caption-side di CSS Proprietà box-shadow di CSS3