Style boxSizingEigenschaft

Style 对象参考手册Style-Objekt

Beispiele

Ändern Sie die boxSizing-Eigenschaft:

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

Selbst ausprobieren »

Definition und Verwendung

Die boxSizing-Eigenschaft ermöglicht es Ihnen, ein bestimmtes Element so zu definieren, dass es auf eine bestimmte Weise zu einem bestimmten Bereich passt.

Wenn Sie beispielsweise zwei Boxen mit Rahmen nebeneinander platzieren müssen, können Sie dies erreichen, indem Sie boxSizing auf "border-box" setzen. Dadurch rendert der Browser eine Box mit der angegebenen Breite und Höhe und legt den Rahmen und den Innenabstand innerhalb der Box ab.


Browser-Unterstützung

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer, Opera, Chrome und Safari unterstützen die boxSizing-Eigenschaft.

Firefox unterstützt eine alternative Eigenschaft zu dieser, nämlich die Eigenschaft MozBoxSizing.


Syntax

Gibt die boxSizing-Eigenschaft zurück:

object.style.boxSizing

Legt die boxSizing-Eigenschaft fest:

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

Eigenschaftswerte

Wert Beschreibung
content-box Standardwert. Dies ist das durch CSS2.1 festgelegte Verhalten für Breite und Höhe. Die festgelegte Breite und Höhe (sowie die min/max-Eigenschaften) gelten jeweils für die Breite und Höhe der Content-Box des Elements. Padding und Border des Elements werden außerhalb der festgelegten Breite und Höhe gezeichnet.
border-box Die für das Element festgelegte Breite und Höhe (sowie die min/max-Eigenschaften) bestimmen die Border-Box des Elements. Das heißt, jegliches für das Element angegebene Padding und Border wird innerhalb der festgelegten Breite und Höhe gezeichnet. Die Inhaltsbreite und -höhe ergeben sich durch Subtrahieren von Border und Padding von den festgelegten Eigenschaften 'width' bzw. 'height'.
initial Setzt die Eigenschaft auf ihren Standardwert. Sieheinitial。
inherit Erbt diese Eigenschaft von seinem Elternelement. Sieheinherit。

Technische Details

Standardwert: content-box
Rückgabewert: Ein String, der die box-sizing-Eigenschaft des Elements darstellt.
CSS-Version CSS3


Ähnliche Artikel

CSS-Referenzhandbuch:box-sizing-Eigenschaft


Style 对象参考手册Style-Objekt

Andere Erweiterungen