Downloads
Auf dieser Seite finden Sie diverse Grafiken und Schemata zum Anschauen und Herunterladen.
Das Boxmodell für Blockboxen
Die unten abgebildete schematische Darstellung des Boxmodells ist die Grundlage zum Gestalten von Blockboxen:
In den letzten Jahren hat ein alternatives Box-Modell namens »Border-Box« von sich reden gemacht, weil damit die zuverlässige Berechnung der Breite eines Containers viel einfacher ist. Aktiviert wird es mit der Anweisung box-sizing: border-box
Besonders beim Floaten ist das superpraktisch
Mehr zu diesem neuen Box-Modell erfahren Sie zum Beispiel hier:
- Buch Einstieg in CSS
- Buch Flexible Boxes
- Artikel Das etwas andere Box-Modell mit {box-sizing:border-box} bei Dr. Web
So let's border-box.
Das Boxmodell für Inlineboxen
Das Boxmodell für Inlineboxen unterscheidet sich leicht von der Variante für Blockboxen. Es wird in Kapitel 8 angedeutet und in Kapitel 23 detailliert erklärt (Abbildung 23.2 auf Seite 458).
Inlineboxen kennen also keinen oberen und unteren Außenabstand. Die Breite (width) wird nur durch den Inhalt des HTML-Elementes bestimmt, die Höhe (height) durch den berechneten Wert für die Schriftgröße (font-size). Der wiederum sollte in einem lesetechnisch günstigen Verhältnis zu line-height stehen.
Kaskade, Vererbung und Standardwert
Im Kapitel »Kaskade, Vererbung und Standardwert« geht es darum, wie der Browser das korrekte CSS zur Darstellung eines HTML-Elementes findet.
Nachdem er aus dem Quelltext einen Dokumentenstammbaum erstellt hat, muss er für jedes zu gestaltende Element für jede CSS-Eigenschaft einen eindeutigen Wert finden. Sollte er in den Stylesheets für eine bestimmte CSS-Eigenschaft genau einen Wert finden, nimmt er ihn. Klare Sache. Wenn es hingegen keinen oder mehrere Werte gibt, helfen dem Browser drei Konzepte bei seiner Entscheidung: Kaskade, Vererbung und Standardwert.
Diese drei Konzepte werden in der folgenden Grafik vorgestellt.