Overview
In dieser Vorlesung wurden die Unterschiede zwischen Block- und Inline-Elementen, die Positionierung von Boxen sowie das Verwenden von Float für das Layout von Bildern und Texten erklärt.
Block- und Inline-Elemente
- Block-Elemente (z. B.
<p>, <h1>, <article>) erzeugen automatisch Umbrüche und nehmen die volle verfügbare Breite ein.
- Nur Block-Elemente können alle Box-Eigenschaften (z. B. Margin, Padding, Höhe, Breite, Border) vollständig nutzen.
- Inline-Elemente (z. B.
<strong>, <em>) sind Teil des Textflusses und erlauben keine vertikalen Margins oder Veränderungen der Höhe/Breite.
- Die CSS-Eigenschaft
display kann verwendet werden, um Elemente zwischen Block, Inline und Inline-Block zu wechseln.
- Inline-Block ist ein Hybrid: es kombiniert Eigenschaften von Block- und Inline-Elementen.
Positionierung von Boxen
- Standardmäßig ist die Positionierung
static (Elemente erscheinen gemäß Dokumentenfluss).
- Mit
relative kann ein Element relativ zu seiner normalen Position verschoben werden.
absolute entfernt das Element aus dem Fluss und positioniert es relativ zum nächsten positionierten Vorfahren.fixed positioniert ein Element fest im Viewport, unabhängig vom Scrollen.- Bei
absolute und fixed müssen Höhe und Breite oft explizit angegeben werden.
static ist die Voreinstellung und sollte immer genutzt werden, wenn keine spezielle Positionierung benötigt wird.
Float und Umfließen von Elementen
- Die CSS-Eigenschaft
float erlaubt das Umfließen von Elementen, meist verwendet für Bilder neben Text.
- Mit
float: right; oder float: left; positioniert man das Element am rechten oder linken Rand, Text fließt entsprechend darum.
- Mit zusätzlichem Padding kann Abstand zwischen Bild und Text geschaffen werden.
- Float eignet sich gut, um Bilder und Text nebeneinander anzuordnen, ist jedoch für komplexe Layouts nicht optimal.
Key Terms & Definitions
- Block-Element — HTML-Element, das einen eigenen Bereich bildet und Umbrüche erzeugt.
- Inline-Element — HTML-Element, das im Textfluss angezeigt wird, ohne Umbruch zu erzeugen.
- display — CSS-Eigenschaft zur Festlegung der Darstellungsart eines Elements (block, inline, inline-block).
- Position — CSS-Eigenschaft zur Steuerung der Platzierung eines Elements (static, relative, absolute, fixed).
- float — CSS-Eigenschaft, um Elemente am linken oder rechten Rand auszurichten und das Umfließen durch nachfolgenden Inhalt zu erlauben.
Action Items / Next Steps
- Experimentiere mit den CSS-Eigenschaften
display, position und float an eigenen HTML-Elementen.
- Vorbereitung auf das nächste Kapitel: modernes Webseiten-Layout (Flexbox/Grid) und responsives Design.