Style boxSizingEigenschaft
Beispiele
Ändern Sie die boxSizing-Eigenschaft:
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, 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:
Legt die boxSizing-Eigenschaft fest:
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
Andere Erweiterungen
Style-Objekt