Zusammenfassung

In dieser Lektion haben wir gelernt, dass:

• jedes Element einer Seite eine Box mit vier Teilen ist: Inhalt, Innenabstand, Rahmen und Außenabstand. Wie ein Bild an der Wand mit seinem Passepartout, seinem Rahmen und dem Abstand zum nächsten Bild.
• Überschriften, Absätze und divs standardmäßig so breit sind wie ihr Elternelement.
• du in einem Browser mit der rechten Maustaste auf ein beliebiges Element klicken und Untersuchen wählen kannst, um seine Box zu sehen.
• width und height standardmäßig die Größe des Inhalts festlegen.
• Größen in Pixeln (px, fest), Prozent (%, ein Anteil des Elternelements), vw und vh (1 % der Breite oder Höhe des Browserfensters) oder rem (die Grundschriftgröße) angegeben werden können.
• ein Rahmen als border: Breite Stil Farbe geschrieben wird, zum Beispiel border: 2px solid #476958. Die Reihenfolge spielt keine Rolle, aber ohne Stil (solid, dashed, dotted und so weiter) gibt es keinen Rahmen. border-top, border-bottom und ähnliche legen nur eine Seite fest.
• border-radius die Ecken rundet und border-radius: 50% aus einem Quadrat einen Kreis macht.
• padding der Platz zwischen dem Inhalt und dem Rahmen ist und der Hintergrund des Elements ihn ausfüllt.
• box-sizing: border-box dafür sorgt, dass width und height den Innenabstand und den Rahmen einschließen. Viele Stylesheets beginnen mit * { box-sizing: border-box; }.
• margin der transparente Platz außerhalb des Rahmens ist. Browser geben manchen Elementen einen Standard-Außenabstand, zum Beispiel 8 Pixel um body.
• padding und margin ein bis vier Werte nehmen: padding: 10px (alle Seiten), padding: 10px 20px (oben und unten, links und rechts), margin: 0 0 10px 0 (im Uhrzeigersinn von oben).
• die vertikalen Außenabstände benachbarter Elemente zusammenfallen: Der Abstand ist so groß wie der größere.
• margin: 0 auto ein Element zentriert, das eine Breite hat.
• overflow festlegt, was mit Inhalt passiert, der nicht hineinpasst: visible (der Standard), hidden, scroll oder auto (scrollen nur bei Bedarf).

Unsere Katzenseite hat jetzt Karten mit Rahmen, abgerundeten Ecken und Abständen in einer zentrierten Section. Als Nächstes kommt ein weiteres kleines Projekt: eine Profilkarte, bei der du Schriften und das Box-Modell selbstständig einsetzt. Danach finden wir in der Lektion Display und Position heraus, warum manche Elemente so breit sind wie die Seite und andere nur so breit wie ihr Inhalt, und wie wir Elemente genau dorthin setzen, wo wir sie haben wollen.