CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaften大全

CSS Bildunterschrift-Seite Eigenschaft CSS3 box-Schatten Eigenschaft

CSS3 box-sizing-Eigenschaft - Verwendung und Beispiel

box-sizing CSS-Eigenschaft wird verwendet, um den Standard zu ändernCSS Box-Modell, die Browser normalerweise verwenden, um die Breite und Höhe des Elements zu berechnen.

Die folgende Tabelle enthält Anweisungen und Versionshistorie der Verwendung dieses Wertes sowie die Syntax in JavaScript-Skripten.

Standardwert:	content-box
Geeignet für:	Alle Elemente, die Breite oder Höhe akzeptieren
Vererbung:	Keine
Animierbar:	Nein Anzeigen Sie die Animationseigenschaften.
Version:	CSS3neue Funktion
JavaScript Syntax:	object.style.boxSizing="border-box"

box-Syntax der sizing

Die Syntax dieser Eigenschaft lautet wie folgt:

box-sizing:　content-box　|　Ausfüllung-box　|　border-box　|　initial　|　inherit

Die folgenden Beispiele zeigen, wie man box-sizing Eigenschaft.

Beispiel

.box　{
　　　　Breite:　50%;
　　　　Ausfüllung:　15px;
　　　　float:　left;
　　　　border:　5px　solide　#000;
　　　　box-sizing:　border-box;
}

Testen Sie es heraus‹/›

Eigenschaftswerte

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
content-box	Die angegebenen width und height Eigenschaften beinhalten nur den Inhalt des Elements. Sie beinhalten keine Ausfüllung, Rahmen oder Abstand.
Ausfüllung-box	Die angegebenen width und height Eigenschaften umfassen die Ausfüllungsgröße und beinhalten nicht Rahmen oder Abstand.
Rahmen-box	Die angegebenen width und height Eigenschaften umfassen die Ausfüllung und den Rahmen, aber nicht den Abstand.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, verwendet der verknüpfte Element sein Elternelement box-Werte der sizing Eigenschaft.

Browserkompatibilität

box-Kompatibilität der Browser für die sizing Eigenschaft, die Zahlen in der folgenden Tabelle stellen die niedrigste Versionsnummer der Browser dar, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.

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

Weiterlesen

Bitte beziehen Sie sich auf die Anleitungen zu folgendem Inhalt:CSS Box-Modell,CSS Größen.

Verwandte Eigenschaften:Ausfüllung,Rahmen,Abstand.

CSS Bildunterschrift-Seite Eigenschaft CSS3 box-Schatten Eigenschaft