Kapitel 7: Grundlagen der visuellen Formattierung
Jedes Element erzeugt eine oder mehrere Boxen, die Element-Boxen. Jedes Element hat eine Content-Aera als innern Kern. Darum grupperen sich Innenabstand (Padding), Rahmen und Randabstand (Border,Margins)
Alle diese Elemente können auf null gesetzt werden. Sie sind optional. Jedes Element einer Box kann einzeln gesetzt werden.
Margins sind immer transparent, sodass der Hintergrund des übergeordneten Elements sichtbar ist. Margins können negative Werte annehmen, aber nicht Padding und Border.
Borders werden durch vordefinierte Eigenschaften gesetzt, wie beispielsweise inset. Wird border-color nicht gesetzt, so nimmt der Rahmen die Farbe des Contents an.
Je nach Element-Typ (Blockelement oder Inline-Elemente), genauso wie floatende oder positionierte Elemente werden die Eigenschaften unterschiedlich behandelt.
Der Übergeordnete Block (Containing Block, Verschachtelung)
Jedes Element verhält sich wie sein umgreifender (übergeordneter) Block und dieser bestimmt den Layout-Kontext des untergeordneten Elementes.
Im normalen (links-rechts) Textfluss wird der Inhalt eines Block vom nächsten übergeordneten Block bestimmt:
Beispiel: <body><div><p>Das ist ein Paragraph</p></div></body>
Das beinhaltende nächste Element von <p> ist das <div>-Element als das nächstliegende Blockelement. Der Containing-Block des <div>-Elements ist der Body-Tag. <p> wird durch das Layout des <div> bestimmt.
Anders verhält es sich bei Inline-Elementen, welche nicht direkt vom Containing-Block abhängig sind.
Kurze Begriffsklärung
Normaler Elementfluss: Von Links nach Rechts (westliche Sprachen), von oben nach unten. Abweichungen vom normalen Fluss enstehen einzig durch floatierende oder positionierte Elemente.
Nichtersetzte Elemente (nonreplaced Elements): Elemente, die einen eigenen Inhalt haben wie das p-, div-, span-, em- etc -Tag. Der textuelle Content befindet sich im Element selbst.
Ersetzte Elemente (replaced Elements): Elemente, die als Platzhalter für einen bestimmten Inhalt dienen, wie etwa das img-Tag, das a-Tag oder das input-Tag in Formularen.
Block-Elemente: Sie generieren ober- und unterhalb neue Zeilen. Jedes Element kann mit display:block zu einem Blockelement gemacht werden. Im normalen Fluss sind diese Elemente vertikal untereinander angeordnet.
Inline-Elemente: Sie sind Abkömmlinge von Blockelementen. Mit display:inline können Block-Elemente zu Inline-Elementen gemacht werden. Im normalen Fluss werden diese Elemente vertikal nebeneinander angeordnet.
Root-Element (Wurzel-Element): In HTML-Dokumenten <html> und in XML-Dokumnenten das, was als Root definiert wird. Das Root-Element umgreift alle andern Elemente der Seite.