Für die Formatierung und Plazierung von Elementen ist entscheidend, welcher Formatklasse ein
Element zugeordnet wird. Im Prinzip gibt es zwei Hauptklassen von Elementen: block-level und
inline-level Elemente. Ein block-level Element wird so formatiert, dass sein Umriß immer ein
(einziges) Rechteck bildet, während ein inline Element in mehrere Rechtecke aufgeteilt werden
kann, die in verschiedenen Zeilen dargestellt werden.
Block-level Elemente
Block-level Elemente werden so plaziert, als ob vor und nach dem Element ein Zeilenvorschub
eingefügt wird. Sie beginnen also in einer neuen Zeile und das darauf folgende Element kann auch
frühestens in der ersten freien Folgezeile dargestellt werden.
Bestimmte CSS-Eigenschaften sind nur auf block-Level Elemente anwendbar.
Listen (list-item) Elemente
Listen Elemente können Aufzählungssymbole enthalten, werden aber im Prinzip wie bock-level
Elemente formatiert.
Für Listen Elemente gibt es einige spezielle Eigenschaften.
Schwimmende (floating) Elemente
Schwimmende Elemente sind Elemente, deren Plazierung außerhalb des normalen Textflußes
erfolgt. Sie werden wie block-level Elemente in einem Rechteck dargestellt und können am rechten
oder linken Rand des übergeordneten block-level Elements ausgerichtet werden (Sie "schwimmen" im
Textfluß an den Rand). Wenn an einer Seite eines schwimmenden Elements genügend Raum
vorhanden ist, können Elemente dort plaziert werden.
Die auf schwimmende Elemente anwendbaren Eigenschaften sind diesselben wie die für block-level
Elemente.
Inline Elemente
Wenn ein inline Element nicht in eine Zeile paßt, wird es getrennt (Zeilenumbruch). Es wird also
in zwei Rechtecke geteilt, wobei das zweite Rechteck an den Anfang der Folgezeile plaziert wird.
Sind für ein inline Element Ränder- bzw. Rahmenbreiten definiert (s.o.), so bleiben diese an
der Stelle, an der der Zeilenumbruch erfolgt, unberücksichtigt.
Mehrere inline Elemente werden innerhalb einer Zeile aufgereiht, bis die horizontale Grenze des
übergeordneten Elements erreicht ist und eine neue Zeile begonnen werden muß.
Ersetzte (replaced) Elemente
Ersetzte Elemente sind Elemente, deren Inhalt aus externen Quellen geladen wird (Das Element wird durch
einen geladenen Inhalt ersetzt). Z.B. wird der Inhalt des
IMG Elements aus einer
Bilddatei entnommen.
Ersetzte Elemente können entweder block-level oder inline Elemente sein.