Box-Modell und Layout

Diese Lektion behandelt das CSS-Box-Modell, Abstände, Ränder, Größen und Positionierung von Elementen. Das Verständnis des Box-Modells ist essentiell für korrektes Layout und Design.

1. Das Box-Modell

Jedes HTML-Element wird als rechteckige Box dargestellt, die aus vier Bereichen besteht: Content, Padding, Border und Margin.

div {
    width: 200px;       /* Content-Breite */
    padding: 10px;      /* Innenabstand */
    border: 5px solid black; /* Rahmen */
    margin: 20px;       /* Außenabstand */
}

2. Content-Bereich

Der Content ist der eigentliche Inhalt, wie Text oder Bilder.

3. Padding

Padding definiert den Abstand zwischen Content und Rahmen.

p {
    padding: 15px;
}

4. Border

Der Border ist der sichtbare Rahmen um das Element.

div {
    border: 2px dashed #2b7cff;
}

5. Margin

Margin definiert den Abstand zu anderen Elementen.

section {
    margin: 20px auto; /* zentriert horizontal */
}

6. Box-Sizing

Mit box-sizing lässt sich festlegen, wie Breite und Höhe berechnet werden.

content-box – Standard, Breite = Content
border-box – Breite = Content + Padding + Border

*, *::before, *::after {
    box-sizing: border-box;
}

7. Positionierung

CSS-Positionierung steuert, wo ein Element angezeigt wird.

static – Standardposition
relative – relativ zur eigenen Position
absolute – relativ zum nächstgelegenen positionierten Vorfahren
fixed – relativ zum Viewport
sticky – scrollt, bleibt aber an einer Position kleben

header {
    position: sticky;
    top: 0;
}

8. Float und Clear

Float verschiebt Elemente nach links oder rechts; Clear verhindert Überlappung.

img {
    float: left;
    margin-right: 10px;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

9. Flexbox (Einführung)

Flexbox ermöglicht flexible Anordnung von Elementen in einer Zeile oder Spalte.

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

10. Zusammenfassung

Box-Modell: Content, Padding, Border, Margin
Box-Sizing bestimmt Berechnung der Breite/Höhe
Positionierung: static, relative, absolute, fixed, sticky
Float/clear beeinflusst Layout von Elementen
Flexbox für flexible Layouts

Das Verständnis des Box-Modells ist essenziell, um CSS-Layouts korrekt zu gestalten.