CSS Box Sizing

CSS Box Sizing

CSS box-sizing Eigenschaft ermöglicht es uns, den Innenabstand (Füllung) und die Ränder im Gesamtbreite und -höhe des Elements zu berücksichtigen.

Wenn das CSS-Attribut

Standardmäßig werden die Breite und Höhe des Elements so berechnet:

  • width + padding + border = tatsächliche Breite des Elements
  • height + padding + border = tatsächliche Höhe des Elements

Das bedeutet: Wenn Sie die Breite/Höhe eines Elements einstellen, sieht das Element in der Regel größer aus als eingestellt (weil der Rahmen und der Innenabstand bereits zur angegebenen Breite/Höhe des Elements hinzugefügt wurden).

Das folgende Bild zeigt zwei <div>-Elemente mit gleicher angegebener Breite und Höhe:

Dieser div ist kleiner
（Breite 300px, Höhe 100px）。
Dieser div ist größer
（Breite ebenfalls 300px, Höhe 100px）。

Die beiden <div>-Elemente oben zeigen in den endgültigen Ergebnissen unterschiedliche Größen an (weil div2 den Innenabstand angegeben hat):

Beispiel

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;

Versuchen Sie es selbst

box-sizing Attribute löst dieses Problem.

Wenn das CSS-Attribut

box-sizing Eigenschaft ermöglicht es uns, den Innenabstand und die Ränder des Elements in der Gesamtbreite und -höhe des Elements zu berücksichtigen.

Wenn auf einem Element box-sizing: border-box;Dann werden Breite und Höhe die Innenabstände und Ränder einschließen:

Jetzt haben beide div die gleiche Größe!
Hurra!

Dieser Beispielcode ist dem vorherigen Beispiel gleich; beide <div>-Elemente haben box-sizing: border-box;:

Beispiel

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;

Versuchen Sie es selbst

Wegen der Verwendung box-sizing: border-box; funktioniert so gut, dass viele Entwickler wünschen, dass alle Elemente auf der Seite auf diese Weise funktionieren könnten.

Der folgende Code stellt sicher, dass alle Elemente auf diese intuitive Weise angepasst werden können. Viele Browser verwenden bereits diese Methode für viele Formularelemente und box-sizing: border-box;（aber nicht alles - das ist der Grund, warum input und textarea bei width: 100%; anders aussehen）。

Es ist sicher und klug, dies auf alle Elemente anzuwenden:

Beispiel

* {
  box-sizing: border-box;

Versuchen Sie es selbst

CSS Box Sizing Eigenschaft

Eigenschaft Beschreibung
box-sizing Bestimmung des Berechnungswegs für die Breite und Höhe von Elementen: ob sie den Innenabstand (Padding) und die Rahmen enthalten sollten.