CSS -Box-Sizing- Eigenschaft
Beispiel
Beziehen Sie Polsterung und Rahmen in die Gesamtbreite und -höhe des Elements ein:
#example1 {
box-sizing: border-box;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die box-sizing
Eigenschaft definiert, wie die Breite und Höhe eines Elements berechnet werden: Sollen sie Padding und Rahmen enthalten oder nicht.
Standardwert: | Inhaltsfeld |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.boxSizing="Randfeld" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit- oder -moz- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
CSS-Syntax
box-sizing: content-box|border-box|initial|inherit;
Eigenschaftswerte
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Geben Sie zwei umrandete Felder nebeneinander an:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Beispiel
Stellen Sie die "universelle Boxgröße" ein:
* {
box-sizing: border-box;
}
Verwandte Seiten
CSS-Tutorial: Größe von CSS-Boxen
HTML-DOM-Referenz: boxSizing-Eigenschaft