Boxgröße - CSS-Tricks

Anonim

Die box-sizingEigenschaft in CSS steuert, wie das Box-Modell für das Element behandelt wird, auf das es angewendet wird.

.module ( box-sizing: border-box; )

Eine der gebräuchlichsten Verwendungsmöglichkeiten besteht darin, es auf alle Elemente auf der Seite anzuwenden, einschließlich Pseudoelementen:

*, *::before, *::after ( box-sizing: border-box; )

Dies wird oft als "universelle Boxgröße" bezeichnet und ist eine gute Arbeitsweise! Das (Literal), das widthSie festlegen, ist die Breite, die Sie erhalten, ohne mentale Berechnungen durchführen und die Komplexität verwalten zu müssen, die sich aus Breiten ergibt, die aus mehreren Eigenschaften stammen. Wir haben hier sogar einen Tag zur Sensibilisierung für Boxgrößen.

Werte

  • content-box: der Standard. Werte für Breite und Höhe gelten nur für den Inhalt des Elements. Die Polsterung und der Rand werden an der Außenseite der Box hinzugefügt.
  • padding-box: Werte für Breite und Höhe gelten für den Inhalt und die Auffüllung des Elements. Der Rand wird an der Außenseite der Box hinzugefügt. Derzeit unterstützt nur Firefox den padding-boxWert.
  • border-box: Werte für Breite und Höhe gelten für Inhalt, Abstand und Rahmen.
  • inherit: erbt die Boxgröße des übergeordneten Elements.

Beispiel

In diesem Beispielbild wird die Standardeinstellung content-box(oben) mit border-box(unten) verglichen :

Die rote Linie zwischen den Bildern repräsentiert den Breitenwert der Elemente. Beachten Sie, dass das Element mit der Standardeinstellung box-sizing: content-box;die deklarierte Breite überschreitet, wenn das Auffüllen und der Rand außerhalb des Inhaltsfelds hinzugefügt werden, während das Element mit der box-sizing: border-box;angewendeten Breite vollständig in die deklarierte Breite passt.

Verwenden der Boxgröße

Angenommen, Sie setzen ein Element auf width: 100px; padding: 20px; border: 5px solid black;. Standardmäßig ist das resultierende Feld 150 Pixel breit. Dies liegt daran, dass das Standardmodell für die Boxgrößenbestimmung content-boxdie deklarierte Breite eines Elements nur auf seinen Inhalt anwendet und das Auffüllen und den Rand außerhalb des Felds des Elements platziert. Dies erhöht effektiv, wie viel Platz das Element einnimmt.

Wenn Sie das in ändern box-sizing, padding-boxwird die Polsterung in die Box des Elements verschoben. Dann wäre die Box 110 Pixel breit, mit 20 Pixel Polsterung innen und 10 Pixel Rand außen. Wenn Sie die Polsterung und den Rand in die Box legen möchten, können Sie verwenden border-box. Die Box wäre dann 100 Pixel breit - die 10 Pixel Rand und 20 Pixel Polsterung werden beide in die Box des Elements geschoben.

Demo

Siehe den Stiftvergleich der Boxgrößenwerte mit CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • width
  • height
  • padding
  • border

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein *† 3 *† 1 ‡ 7 * 8 * 2.1 * † Irgendein *

* padding-boxnicht unterstützt

† Ältere Versionen erfordern ein -webkitPräfix (Chrome 1-9, Safari 3-5, Android 2.1-3.x).

‡ -mozPräfix bis Version 28 erforderlich, ab 29 nicht mehr vorfixiert.