CSS - Box Sizing

Hallo da, ambitionierte Web-Entwickler! Heute tauchen wir ein in die faszinierende Welt der CSS-Box-Sizing. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch dieses entscheidende Konzept zu führen, das dein Leben beim Gestalten von Web-Layouts erheblich einfacher machen wird. Glaub mir, wenn du das einmal beherrschst, wirst du dich fragen, wie du jemals ohne es gelebt hast!

CSS Box Sizing Eigenschaft

Lassen wir mit den Grundlagen beginnen. Die CSS-Box-Sizing-Eigenschaft ist wie eine magische Zauberstab, der bestimmt, wie die Gesamtbreite und -höhe eines Elements berechnet werden. Sie ist ein Game-Changer im Webdesign, und ich bin aufgeregt, dir zu zeigen, warum!

Im traditionellen CSS-Box-Modell, wenn du eine Breite und Höhe für ein Element festlegst, kann der tatsächliche Platz, den es einnimmt, größer sein aufgrund von Innenabstand (Padding) und Rahmen (Borders). Dies kann zu unerwarteten Layoutproblemen führen, ähnlich wie wenn man eine große Box in einen kleinen Schrank packen will – das funktioniert einfach nicht!

Hier kommt box-sizing zur Rettung. Es ermöglicht uns zu steuern, wie der Browser die gesamte Größe eines Elements berechnet.

Mögliche Werte

Die Box-Sizing-Eigenschaft kann drei mögliche Werte annehmen. Lassen wir sie durcharbeiten:

Wert	Beschreibung
content-box	Dies ist der Standardwert. Breite und Höhe gelten nur für den Inhalt des Elements.
border-box	Breite und Höhe umfassen Inhalt, Innenabstand und Rahmen.
inherit	Das Element erbt den Box-Sizing-Wert von seinem übergeordneten Element.

Nun sehen wir das in der Praxis mit einigen Beispielen!

Content-Box (Standard)

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: content-box;
}

In diesem Beispiel beträgt die Gesamtbreite des Elements 250px (200px + 20px Innenabstand auf jeder Seite + 5px Rahmen auf jeder Seite), und die Gesamthöhe beträgt 150px. Es ist wie wenn man eine kleine Pizza bestellt und dann eine große bekommt – unerwartet, oder?

Border-Box

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
}

Nun, mit border-box, beträgt die Gesamtbreite und -höhe exakt 200px und 100px respectively. Der Innenabstand und der Rahmen sind in diese Maße eingeschlossen. Es ist wie wenn man eine Pizza bestellt und genau das bekommt, was man wollte – keine Überraschungen!

Anwendungsbereich

Die Box-Sizing-Eigenschaft gilt für alle Elemente, die Breite oder Höhe akzeptieren. Dies umfasst:

• Block-Level-Elemente (wie <div>, <p>, <h1>, etc.)
• Inline-Block-Elemente
• Tabellenzellen und Tabellenbeschriftungselemente

Es ist wichtig zu beachten, dass sie nicht auf Inline-Elemente angewendet wird,除非你更改其显示属性。

DOM-Syntax

In JavaScript kannst du die Box-Sizing-Eigenschaft über das DOM abrufen und ändern. So geht's:

// Den Box-Sizing-Wert abrufen
let boxSizing = element.style.boxSizing;

// Den Box-Sizing-Wert festlegen
element.style.boxSizing = 'border-box';

Beispiel

Lassen wir alles together mit einem praktischen Beispiel. Stellen wir uns vor, wir erstellen ein einfaches Layout mit zwei nebeneinander liegenden Spalten.

<div class="container">
<div class="column">Spalte 1</div>
<div class="column">Spalte 2</div>
</div>

.container {
width: 100%;
}

.column {
width: 50%;
padding: 20px;
float: left;
box-sizing: border-box;
}

In diesem Beispiel setzen wir die Breite jeder Spalte auf 50% und fügen Innenabstand hinzu. Durch die Verwendung von box-sizing: border-box stellen wir sicher, dass die Spalten perfekt nebeneinander passen, auch mit dem zusätzlichen Innenabstand. Ohne es würden die Spalten ihren Behälter überfluten!

Lassen wir es auseinander:

1. Wir setzen den Behälter auf 100% Breite, um die volle Breite seines übergeordneten Elements einzunehmen.
2. Jede Spalte ist auf 50% Breite gesetzt, sodass sie nebeneinander sitzen sollten.
3. Wir fügen jedem Spalte 20px Innenabstand hinzu, um etwas Platz zu lassen.
4. Durch die Verwendung von box-sizing: border-box ist der Innenabstand in der 50% Breite enthalten, was ein Überfluten verhindert.

Dies ist nur die Spitze des Eisbergs, wenn es um die Macht der Box-Sizing geht. Während deiner Reise im Webdesign wirst du unzählige Situationen finden, in denen diese Eigenschaft den Tag rettet.

Denke daran, Webdesign dreht sich alles um das Erstellen harmonischer Layouts, und Box-Sizing ist deine geheime Waffe, um diese Harmonie zu erreichen. Es ist wie ein gut organisiertes Closet – alles passt perfekt hinein, und es gibt keine unangenehmen Überraschungen!

In meinen Jahren des Unterrichtens habe ich unzählige "Aha!"-Momente erlebt, wenn Schüler das Konzept der Box-Sizing verstanden haben. Es ist dieser magische Moment, in dem Layouts plötzlich Sinn machen und die Frustration unerwarteter Überflüsse verschwindet.

Also weiter üben, experimentiere mit verschiedenen Layouts und habe keine Angst, mit Box-Sizing herumzuspielen. Bevor du es weißt, wirst du pixelgenaue Designs mit Leichtigkeit erstellen!

Happy Coding, zukünftige Web-Zauberer!

Credits: Image by storyset