Layoutgrundlagen
Abmessungs- und Positionierungseigenschaften sind über das DHTML-Dokumentobjektmodell (DOM) und als CSS-Eigenschaften verfügbar. Sie können die DHTML DOM-Eigenschaften zum programmgesteuerten Festlegen von CSS-Eigenschaften verwenden. Über DHTML DOM verfügbar gemachte Eigenschaften geben Werte basierend darauf zurück, wie ein Element im Dokument gerendert wird. CSS-Eigenschaften geben Werte basierend auf den voreingestellten Werten anderer CSS-Eigenschaften zurück.
Das Elementfeld
Jedes sichtbare Element auf einer Webseite nimmt einen festgelegten Platz im Dokument ein. Der Platzbedarf eines Elements wird anhand des Elementrechtecks bzw. Elementfelds definiert. Ein Elementrechteck beinhaltet alle Layout- und Anzeigeeigenschaften plus ggf. Inhalt.
In der Grafik oben ist dargestellt, wie die Eigenschaften margin, border und Innenabstand den Inhalt eines generischen Elements umgeben. "Element Width" steht für die Breite des Elementinhalts, "Box Width" für die Breite des Inhalts plus zusätzlicher Raum für Layouteigenschaften. Die Höhe eines Elements und seine Layouteigenschaften können in ähnlicher Weise dargestellt werden.
Block- oder Inlineelemente
Alle sichtbaren HTML-Elemente werden entweder als Blöcke oder inline angezeigt. Ein Blockelement, z. B. ein DIV-Element, beginnt normalerweise eine neue Zeile und erhält seine Größe gemäß der Breite des übergeordneten Containers. Ein Inlineelement, z. B. ein SPAN-Element, beginnt normalerweise keine neue Zeile und erhält seine Größe gemäß der Höhe und Breite seines eigenen Inhalts.
Größe, Layout und Position von Elementen
Ein Element verfügt über Layout, wenn eine der folgenden Bedingungen erfüllt ist:
Seine Breite, Höhe oder beides sind angegeben.
Es handelt sich um ein Inlineblockelement (display: inline-block).
Es hat eine absolute Position (position: absolute).
Es handelt sich um ein unverankertes Element (float: left, float: right).
Es handelt sich um ein Tabellenelement.
Es ist transformiert (style="zoom: 1").
Fast alle Inline- und Blockelemente haben ein Layout. Die Ausnahme bildet ein Inlineelement, das weder positioniert ist, noch eine festgelegte Höhe oder Breite hat.
Ein positioniertes Element hat konkrete Abmessungen und kann mithilfe der CSS-Layouteigenschaften auf eine Position festgelegt werden: Anfang, right, left, bottom. Die Position nicht positionierter Elemente ist relativ zu ihrem nächsten übergeordneten Element und hat ein Layout. Die Position ist nützlich, wenn ein oder mehrere Elemente innerhalb des Dokuments zu relativen oder absoluten Koordinaten verschoben werden. Sie kann auch beim Erstellen bestimmter Dokumentformatvorlagen hilfreich sein.