Style boxSizing Eigenschaft

Definition und Verwendung

boxSizing Diese Eigenschaft ermöglicht es Ihnen, bestimmte Elemente auf eine bestimmte Weise zu definieren, die einem bestimmten Bereich entsprechen.

Zum Beispiel, wenn Sie zwei Rahmenboxen nebeneinander platzieren möchten, können Sie box-sizing auf "border-box" setzen. Dies lässt den Browser Kasten mit festgelegter Breite und Höhe darstellen und die Rahmen und Innenabstände in den Kasten einfügen.

Weitere Informationen:

CSS Referenzhandbuch:box-sizing Eigenschaft

Beispiel

boxSizing Eigenschaft ändern:

document.getElementById("myDIV").style.boxSizing = "border-box";

Versuchen Sie es selbst

Syntax

boxSizing Eigenschaft zurückgeben:

object.style.boxSizing

boxSizing Eigenschaft setzen:

object.style.boxSizing = "content-box|border-box|initial|inherit"

Eigenschaftswert

Wert Beschreibung
content-box

Standardwert. Dies ist das Verhalten der Breite und Höhe, wie es von CSS2.1 vorgeschrieben ist.

Die festgelegte Breite und Höhe (sowie die min/max-Eigenschaften) werden auf die Breite und Höhe des Inhaltskastens des Elements angewendet.

Die Innenabstände und Rahmen des Elements werden außerhalb der festgelegten Breite und Höhe geplant und gezeichnet

border-box

Die Breite und Höhe des Elements bestimmen den Rahmenkasten des Elements.

Das bedeutet, dass jede eingestellte Innenabstand und der Rahmen im festgelegten Breite und Höhe gezeichnet wird.

Die Breite und Höhe des Inhalts können durch das Abziehen der Ränder und des Innenraums von der festgelegten Breite und Höhe erhalten werden.

initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit

Technische Details

Standardwert: content-box
Rückgabewert: Zeichenkette, die den box-sizing Eigenschaft
CSS-Version: CSS3

Browser-Unterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung