Es gibt mehrere Eigenschaftswerte in CSS box-sizing, mit denen Sie das Verhalten der Größe von Elementen auf einer Webseite steuern können. Einer der nützlichsten Werte - border-box.
Wenn ein Wert auf ein Element angewendet wird box-sizing: border-box. Die Größe des Elements wird bestimmt, einschließlich der Grenzen und der inneren Einrückung (padding), jedoch ohne Berücksichtigung der äußeren Einrückung (margin). Dies bedeutet, dass das Element, wenn es auf Breite oder Höhe festgelegt ist, diese Abmessungen zusammen mit den Grenzen und inneren Einrückungen aufweist, jedoch ohne die äußeren Einrückungen zu berücksichtigen.
Einer der Hauptvorteile der Verwendung box-sizing: border-box dadurch wird die Notwendigkeit komplexer Berechnungen reduziert, um die Größe von Grenzen und Einrückungen zu berücksichtigen. Anstatt die Gesamtbreite eines Elements einschließlich Rahmen und Einzug zu berechnen, kann der Entwickler einfach die gewünschte Breite oder Höhe angeben, und der Browser verteilt automatisch den verfügbaren Platz zwischen Inhalt, Rahmen und Einzug.
Ein weiterer Vorteil box-sizing: border-box ist sein vorhersehbares Verhalten beim Ändern der Größe eines Elements. Wenn Sie diesen Wert verwenden, bleibt der Inhalt des Elements immer innerhalb seiner Grenzen, anstatt darüber hinauszugehen und die Gesamtstruktur der Seite zu stören. Dies ist besonders nützlich bei der Implementierung von responsivem Design, wenn sich die Größe von Elementen je nach Bildschirmgröße oder Gerät ändern kann.
Warum brauchen Sie Box-sizing: border-box in CSS
Wenn der Browser Elemente einer Webseite rendert, berechnet er automatisch die Größe des Elements basierend auf seiner Breite und Höhe sowie den Einstellungen für Einzug und Rahmen. Normalerweise legen Webentwickler die Breite und Höhe eines Elements fest, und Ihr Browser fügt diesen Dimensionen automatisch Vorräte (Padding) und Grenzen (border) hinzu, um die endgültigen Abmessungen des Elements zu erhalten.
Dieses Verhalten kann jedoch manchmal Verwirrung und Probleme verursachen. Wenn Sie beispielsweise einen Block erstellen möchten, der 50% der Breite des übergeordneten Containers einnimmt und ein Feld mit der Größe darin enthält, müssen Sie berücksichtigen, dass dieses Feld zur angegebenen Breite des Blocks hinzugefügt wird, was zu einem Überlauf und einer unerwünschten Anordnung der Elemente führen kann.
Verwendend box-sizing: border-box. Sie können das Verhalten von Elementen so ändern, dass die angegebene Größe eines Elements sowohl seinen Inhalt als auch seine Bestände und Grenzen enthält. Dies bedeutet, dass Sie diese Bestände und Grenzen nicht mehr berücksichtigen müssen, wenn Sie die Breite und Höhe eines Elements festlegen – sie werden alle automatisch einbezogen.
Diese Einstellung kann besonders nützlich sein, wenn Sie Elemente mit festen Abmessungen und festgelegten Beständen und Grenzen erstellen müssen, um die Positionierung und Interaktion mit anderen Elementen auf der Seite genau zu steuern. Außerdem können Sie die Anordnung von Elementen einfacher steuern, insbesondere wenn Sie ein flexibles Layout verwenden.
Einfache Anpassung der Elementgrößen
Ohne die Box-sizing-Eigenschaft zu verwenden, umschließt das Standardverhalten des Browsers die Größe eines Elements innerhalb seiner Grenzen. Das heißt, wenn Sie einen Block mit fester Breite und Höhe haben, erhöht das Hinzufügen eines Rahmens oder einer Füllung zu diesem Element seine Gesamtgröße.
Verwenden Sie jedoch die Box-Sizing-Eigenschaft: mit border-Box können Sie die Größe eines Elements so steuern, dass sie auch beim Hinzufügen eines Rahmens und einer Füllung fest bleiben. Wenn Sie in diesem Fall die Breite des Elements in Pixel oder Prozent angeben, können Sie sicher sein, dass die Größe des Elements unverändert bleibt, unabhängig davon, wie viel Platz der Rahmen oder die Füllung in Anspruch nimmt.
Vorteile der Verwendung der Box-Sizing-Eigenschaft: border-Boxen sind offensichtlich, besonders wenn Sie responsive und reaktionsschnelle Webseiten entwickeln. Anstatt die Größe der Elemente neu zu berechnen, wenn Sie den Rahmen oder die Füllung ändern, können Sie sicher sein, dass das Element die gleiche Größe hat wie vor dem Hinzufügen zusätzlicher Stile.
| Eigenschaft | Bedeutung | Die Beschreibung |
|---|---|---|
| box-sizing | content-box | Die Abmessungen eines Elements werden innerhalb seiner Grenzen definiert und enthalten keine Grenze und keine Füllung. |
| box-sizing | border-box | Die Abmessungen des Elements umfassen den Rahmen und die Füllung, ohne die angegebene Breite und Höhe zu ändern. |
Vermeiden von Positionierungsproblemen
Verwenden der Box-Sizing-Eigenschaft: border-box in CSS vermeidet Probleme beim Positionieren von Elementen auf einer Webseite. Diese Eigenschaft ändert die Art und Weise, wie der Browser die Größe der Elemente berechnet.
Standardmäßig berücksichtigt der Browser bei der Berechnung der Größe eines Elements nur die Breite und Höhe des Inhalts innerhalb des Elements. Dies kann jedoch dazu führen, dass die in CSS festgelegten Eigenschaften, wie padding und border, nicht übereinstimmen.
Das Problem wird besonders deutlich, wenn viele Elemente mit dem angegebenen Padding und Border auf einer Webseite verwendet werden. Eine fehlerhafte Positionierung von Elementen kann zu Verschiebungen anderer Elemente, Designverzerrungen und Problemen mit der visuellen Wahrnehmung führen.
Bei der Verwendung von box-sizing: border-box berücksichtigt der Browser jedoch die Breite und Höhe des Elements selbst, einschließlich padding und border. Auf diese Weise werden die Abmessungen des Elements vorhersehbarer berechnet und den in CSS festgelegten Eigenschaften entsprechen.
Der Vorteil der Verwendung von Box-sizing: border-Box besteht darin, dass Sie die Positionierung der Elemente genauer steuern und verhindern, dass die Größe der Anwendung nicht mit dem Design übereinstimmt.
| Eigenschaft | Bedeutung | Die Beschreibung |
| box-sizing | border-box | Dem Element wird die Breite und Höhe zugewiesen, einschließlich padding und border |
| box-sizing | content-box | Dem Element wird eine Breite und Höhe zugewiesen, die Padding und Border nicht enthält |
