Ändern des Boxmodells

Im obigen Beispiel hat die Box eines Überschriftenelements durchgehende, schwarze, 1 Pixel dicke Ränder. Die Höhe der Box beträgt 200 Pixel, während die Breite der Box 300 Pixel beträgt. Außerdem wurde an allen vier Seiten des Boxinhalts ein Abstand von 10 Pixeln festgelegt.

Leider wirken sich beim aktuellen Box-Modell die Randstärke und die Polsterung auf die Abmessungen der Box aus.

Durch den Abstand von 10 Pixeln erhöht sich die Höhe der Box auf 220 Pixel und die Breite auf 320 Pixel. Als nächstes erhöht der 1 Pixel dicke Rand die Höhe auf 222 Pixel und die Breite auf 322 Pixel.

Bei diesem Boxmodell werden die Randstärke und die Polsterung zu den Gesamtabmessungen der Box addiert. Dies macht es schwierig, eine Box genau zu dimensionieren. Mit der Zeit kann es dadurch auch schwierig werden, den gesamten Inhalt einer Webseite zu positionieren und zu verwalten.

In dieser kurzen Lektion werden wir sehen, wie wir eine andere Technik anwenden, mit der wir dieses Problem vollständig meiden werden.

Viele Eigenschaften in CSS haben einen Standardwert und müssen nicht explizit im Stylesheet festgelegt werden.

Beispielsweise ist die Standardeinstellung font-weight der Text ist normal, aber dieses Eigenschafts-Wert-Paar wird normalerweise nicht in einem Stylesheet angegeben.

Dasselbe gilt für die Boxmodelle die Browser annehmen. In CSS box-sizing steuert die Eigenschaft den Typ des Boxmodells, das der Browser beim Interpretieren einer Webseite verwenden soll.

Der Standardwert dieser Eigenschaft ist content-box. Dies ist dasselbe Boxmodell, das beeinflusst wird durch Grenze, Dicke und Polsterung.

Im obigen Beispiel bliebe die Höhe der Box bei 150 Pixel und die Breite bei 200 Pixel. Die Randstärke und Polsterung würde vollständig innerhalb der Box verbleiben.

So einfach ist das!

Im obigen Beispiel zielt der universelle Selektor (*) auf alle Elemente auf der Webseite ab und legt deren Box-Modell auf das border-box Modell fest.

In dieser Lektion haben wir eine wichtige Einschränkung des Standard-Boxmodells kennengelernt: Die Boxabmessungen werden beeinflusst durch Rand (border), Dicke (thickness) und Polsterung (padding).

Sehen wir uns noch einmal an, was wir gelernt haben:

• Im standard Box-Modell werden die Abmessungen durch die Rahmendicke und die Polsterung beeinflusst.

• Die box-Sizing -Eigenschaft steuert das vom Browser verwendete Box-Modell.

• Der Standardwert der box-sizing -Eigenschaft ist content-box.

• Der Wert für das neue Boxmodell ist border-box.

• Das border-box -Modell wird nicht von der Randdicke oder der Polsterung beeinflusst.