Wie breit ist eine Box wirklich?
Das Box-Modell beschreibt, dass jedes Element einer Seite ein Rechteck aus vier Schichten ist. Flexbox und Grid ordnen solche Rechtecke in Reihen und Spalten an.
Auf dem Mensaplan sollen drei Karten nebeneinander stehen, jede 200 Pixel breit. Plötzlich rutscht die dritte in die nächste Zeile. Der Grund sind Abstände, die Sie nicht mitgerechnet haben.
Am Ende dieser Lektion
Notiz
Ich kann Boxen mit Box-Modell, Flexbox und Grid anordnen.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Box-Modell | jedes Element ist eine Box aus Inhalt, Innenabstand, Rahmen und Außenabstand | |
| Innenabstand | der Platz zwischen Inhalt und Rahmen | padding |
| Rahmen | die Linie um die Box | border |
| Außenabstand | der Platz außerhalb des Rahmens | margin |
| Flexbox | ein Layout, das Boxen in einer Reihe oder Spalte anordnet | display: flex |
| Grid | ein Layout aus Zeilen und Spalten | display: grid |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Jedes Element ist eine Box aus vier Schichten
Von innen nach außen hat jede Box den Inhalt, den Innenabstand (padding), den Rahmen (border) und den Außenabstand (margin).
Innenabstand und Rahmen gehören zur Box und tragen deren Farbe. Der Außenabstand ist leer und hält andere Boxen auf Abstand.
Ein Beispiel: die Breite einer Karte
| Schicht | Wert je Seite | Beide Seiten | Breite bis hier |
|---|---|---|---|
| Inhalt | 200 px | 200 px | 200 px |
| Innenabstand | 10 px | 20 px | 220 px |
| Rahmen | 2 px | 4 px | 224 px |
| Außenabstand | 8 px | 16 px | 240 px |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
box-sizing legt fest, was width misst
Standardmäßig misst width nur den Inhalt (content-box). Innenabstand und Rahmen kommen dazu, die Karte wird also breiter als 200 Pixel.
Mit box-sizing: border-box misst width die Box samt Innenabstand und Rahmen. Die Karte aus dem Beispiel ist dann 200 Pixel breit und belegt mit dem Außenabstand 216.
Messen Sie eine Karte
<div class="karte">Linsensuppe</div>
<div class="karte">Pizza</div>
Ein häufiger Fehler
Warnung
Viele glauben, width: 200px heiße immer, dass die Box 200 Pixel belegt. Das stimmt nur mit border-box. Mit content-box kommen Innenabstand, Rahmen und Außenabstand dazu.
Flexbox ordnet Boxen in einer Reihe an
Mit display: flex auf dem Elternelement stehen die Kinder nebeneinander. gap setzt den Abstand dazwischen. justify-content verteilt den freien Platz, und flex-wrap: wrap lässt Boxen in die nächste Zeile umbrechen.
Flexbox arbeitet in einer Richtung: entweder als Reihe oder als Spalte.
Probieren Sie Flexbox aus
<div class="reihe">
<div class="karte">Suppe</div>
<div class="karte">Pizza</div>
<div class="karte">Salat</div>
</div>
Grid ordnet Boxen in Zeilen und Spalten an
Ein Grid arbeitet in zwei Richtungen. Mit display: grid und grid-template-columns: 1fr 1fr 1fr entstehen drei gleich breite Spalten. Die Einheit fr steht für einen Anteil des freien Platzes.
Nehmen Sie Flexbox für eine Reihe, etwa eine Navigation. Nehmen Sie Grid für ein ganzes Raster, etwa eine Übersicht aller Gerichte.
Probieren Sie ein Grid aus
<div class="raster">
<div>Suppe</div><div>Pizza</div><div>Salat</div>
<div>Pasta</div><div>Curry</div><div>Obst</div>
</div>
Das Lab zeigt den Innenabstand einer echten Seite
Das Stylesheet der Seite im Lab setzt den Innenabstand an mehreren Stellen: im Kopf, im Hauptbereich, in den Karten, den Eingabefeldern und im Fuß.
Der Befehl grep sucht eine Zeichenfolge in einer Datei. Mit -n schreibt er die Zeilennummer davor. So sehen Sie, wo padding steht und welchen Wert es hat.
Alle Zeilen mit padding suchen
docker exec jupyter grep -n "padding" site/style.cssHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.