Inhaltsbereich

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:

Little Boxes - Das Boxmodell für Block-Elemente als visuelles Schema
Schema für das klassische Content-Box-Modell

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

Das alternative Border-Box-Modell
Schema für das neuere Border-Box-Modell

Mehr zu diesem neuen Box-Modell erfahren Sie zum Beispiel hier:

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.