Style boxSizing Eigenschaft
- Vorherige Seite boxShadow
- Nächste Seite captionSide
- Zurück zur übergeordneten Ebene HTML DOM Style-Objekt
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";
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 |
- Vorherige Seite boxShadow
- Nächste Seite captionSide
- Zurück zur übergeordneten Ebene HTML DOM Style-Objekt