Overview
In dieser Vorlesung wurde das Box-Modell in CSS eingeführt, das für das Layout und die Anordnung von HTML-Elementen auf Webseiten grundlegend ist.
Grundidee des Box-Modells
- Das Box-Modell beschreibt, dass jedes HTML-Element als rechteckige Box dargestellt wird.
- Es dient dazu, verschiedene Elemente ohne Tabellen nebeneinander, übereinander oder ineinander zu positionieren.
- Besonders wichtig ist das Box-Modell im responsiven Webdesign, um Layouts auf verschiedenen Geräten zu ermöglichen.
Aufbau einer Box
- Jede Box besteht aus vier Bereichen: Content (Inhalt), Padding (Innenabstand), Border (Rahmen), Margin (Außenabstand).
- Content ist der eigentliche Inhalt, z.B. Text oder Bild.
- Padding ist der Abstand zwischen Inhalt und Rahmen.
- Border ist der sichtbare Rahmen um die Box herum.
- Margin ist der Abstand zwischen der Box und anderen Elementen oder dem Browserrand.
Anwendung von Box-Eigenschaften
- Mit CSS-Eigenschaften wie
width und height wird die Größe des Inhaltsbereichs festgelegt.
padding bestimmt den inneren Abstand zur Box-Grenze und kann für jede Richtung einzeln oder zusammen angegeben werden.border definiert den Rahmen, mit Optionen für Dicke, Stil und Farbe.margin regelt den äußeren Abstand und kann ebenfalls einzeln oder gesammelt angegeben werden.- Mit
margin: auto lässt sich eine Box zentriert ausrichten.
Praktische Beispiele
- In Visual Studio Code können Boxen mit unterschiedlichen Farben, Größen und Abständen gestaltet werden.
- Boxen mit der Klasse „box1”, „box2”, „box3” können individuell gestylt und verschieden positioniert werden.
Wichtige Hinweise
- Die Breite im klassischen Box-Modell bezieht sich nur auf den Inhaltsbereich, nicht auf Rahmen und Padding.
- Es gibt ein neues Box-Modell (border-box), das die Berechnung vereinfacht.
- Das Verständnis der einzelnen Bereiche ist für die spätere Positionierung essenziell.
Key Terms & Definitions
- Box-Modell — CSS-Konzept zur Darstellung und Anordnung von HTML-Elementen als Boxen.
- Content — Eigentliche Inhalt einer Box, z. B. Text oder Bild.
- Padding — Innenabstand zwischen Inhalt und Rahmen.
- Border — Rahmen um eine Box.
- Margin — Außenabstand zu anderen Elementen oder dem Browser.
Action Items / Next Steps
- Eigenständig kleine Webseite bauen und mit Box-Eigenschaften experimentieren.
- Im Skript die Kurznnotationen für margin, padding und border nachlesen.
- Für die nächste Sitzung über die Berechnung von Box-Größen informieren.