Ein XHTML-Dokument setzt sich aus einer Vielzahl von rechteckigen Boxen zusammen, deren Verhalten, Fluss und Ausdehnung mit einer Reihe von Eigenschaften beeinflusst werden können. Das CSS-Boxmodell dient als Grundlage der Darstellung und Positionierung aller Elemente und ist vergleichbar mit dem Rahmen-Prinzip, durch das in einer Layout-Software Inhalte platziert und ausgerichtet werden.
Im Gegensatz zu einem Print-Layout werden CSS-Boxen stets untereinander angeordnet - es sei denn, es werden Ihnen Eigenschaften zugeteilt, die eine individuelle Platzierung auf ein definierten Fläche im Browserfenster vorgeben. Layout mit CSS bedeutet stets, eine klare Aufteilung der Seitenelemente vorzunehmen und jede verwendete Box exakt zu positionieren.
1. Der Aufbau einer Box
Jedes Element erzeugt eine rechteckige Box, die das Element umgibt und sich aus folgenden Bereichen bzw. Eigenschaften zusammensetzt:
- einer Contentbox (Der Inhalt des Elements, zum Beispiel ein Text oder ein Bild)
- einer Paddingbox (Polsterung/Innenabstand erhält die Farbe der Box)
- einer Borderbox (Rahmen)
- einer Marginbox (Randabstand/Aussenabstand erhält die Farbe der umliegenden Box)
- den Maßen (Höhe und Breite)
Jeder der Bereiche (ausser den Maßen) kann in oben, rechts, unten und links aufgeteilt werden, die Reihenfolge bewegt sich im Uhrzeigersinn von der oberen Kante:
2. Die Abmessungen - Berechnung der Höhe und Breite
Die Gesamtbreite und -höhe eines Elements addiert sich aus der Breite beziehungsweise Höhe der einzelnen Boxen-Elemente: Inhalt, Rahmen, Aussen- und Innenabstand.
Für die Berechnung der vertikalen Aussenabstände gilt dabei eine Besonderheit: die Aussenabstände zweiter übereinander liegender Boxen wird zusammengefasst:
margin-top :30px; und margin-bottom: 30px; ergeben in dem Zwischeraum der Boxen 30px (statt wie bei horizontalen Berechnungen 60px).
3. Normalisierung
Viele HTML-Elemente haben eine Standard-Einstellung für Rahmen, Abstände und Einrückungen (li, p, h1-h4, img). Das führt dazu, dass bei der Erstellung eines Layouts die Ausrichtung der einzlenen Boxen, Listen und Bilder mühselig ist, da die Browser über unterschiedliche Standard-Einstellungen verfügen. Es macht Sinn, alle Werte zuerst einmal zurüeckzusetzen, bevor man die Formatierung beginnt - dieser Vorgang wird mit dem Begriff »Normalisierung« bezeichnet.
/*normalisierung marign, padding, body*/
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{margin:0; padding:0;}
/*normalisierung font-size headlines*/
h1, h2, h3, h4, h5, h6
{font-size:100%;}
/*entfernt list-style aus listen*/
ol, ul
{list-style:none;}
/*normalisiert font-style und font-weight auf normal*/
address, caption, cite, code, dfn, em, strong, th, var
{font-style:normal; font-weight: normal;}
/*normalisiert tabellen*/
table
{border-collapse: collapse; border-spacing:0;}
/*entfernt border aus fieldset und img*/
fieldset, img
{border:0; vertical-align:bottom;}
/*richtet text in caption und th links aus*/
caption, th
{text-align:left;}
/*entfernt anfuehrungszeichen aus q*/
q:before, q:after
{content:'';}
Beispieldateien / Normalisierung