📦Boxmodell

Wie dir vielleicht bereits aufgefallen ist, geht es bei Webseiten oft darum, Boxen zu erstellen (HTML) und Boxen zu gestalten (CSS). Die meisten HTML-Elemente sind somit Boxen oder Schachteln, welche übereinander und nebeneinander gestapelt werden.

Mit CSS können Grösse, Farben, Position usw. bestimmt werden.

Eigenschaften von Boxen

Das CSS-Layout basiert auf dem Box-Modell. Jede Box, die Platz auf einer Webseite einnimmt, hat unter anderen folgende Eigenschaften:

Aussenabstand (margin): Der Abstand vom Border bis zum nächsten benachbarten Element.
Rahmen (border): Der Border ist der Rahmen um ein Element.
Innenabstand (padding): Das Padding ist der Raum zwischen Inhalt und Rahmen eines Elements.

🛠️ Erforschen

Rufe eine beliebige Website im Internet auf, öffne die "Developer Tools" (Rechtsklick auf ein Element > "Untersuchen" oder F12) und suche das Tab "Computed".
Schau dir die Grafik des Box-Models eines HTML-Elements unter "Computed" an und darunter, woher die Abstände in CSS kommen.
Wechsle zwischen den Tabs "Styles" und "Computed", das ist anders?
Untersuche noch ein paar andere Elemente auf der gleichen Seite.

Shorthand Properties: 4 Seiten - top, right, bottom, left

Die Abstände und Rahmen einer Box können für alle 4 Seiten einzeln oder zusammen oder einzeln definiert werden. Ein paar Beispiele:

.element-x {
    margin: 20px; /* Aussenabstand 20px, auf allen Seiten gleich */
    border: 1px solid blue; /* Rahmen: 1px breit, durchgezogen, blau */
    border-bottom: 2px double; /* Rahmen unten überschreiben (breiter) */
    padding-top: 10px; /* Innenabstände... */
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 20px;
}
.element-y {
    margin: 0 40px; /* Aussenabstand oben & unten 0px, rechts & links 40px */
    border: 2px dashed #CC0000; /* Rahmen: 2px, gestrichelt, rot */
    border-radius: 10px; /* Runde Ecken */
    padding: 10px 20px 15px 20px; /* Innenabstand wie oben, zusammengefasst: oben rechts unten links */
}
.image {
    border-radius: 50%; /* Schneidet ein Bild kreisrund aus */
}

🛠️ Ausprobieren

Probier die Möglichkeiten aus: w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Höhe, Breite

Für jede Box kann die Breite und Höhe definiert werden. Häufige Masseinheiten sind Pixel oder Prozent, manchmal auch vw/vh , selten rem/em.

.container {
    width: 200px; // Breite 
    max-width: 50%; // Maximum 50% der übergeordneten Box breit
    height: 600px; // Höhe
    min-height: 50vh; // Minimal halbe Viewporthöhe (Fensterhöhe)
}

box-sizing

Hinweis: Standardmässig beziehen sich width und height nur auf den Inhaltsbereich. Padding und Border kommen zusätzlich dazu. Mit box-sizing: border-box; kann das Verhalten geändert werden, sodass width und height den gesamten Bereich inkl. Padding und Border umfassen.

Box-Sizing für ALLE Elemente auf der Website einstellen:

* {
    box-sizing: border-box;
}

Übergroser Inhalt (`overflow`)

Wenn der Inhalt einer Box grässer ist als die angegebene Breite oder Höhe der Box, kannst du bestimmen, was passieren soll:

overflow: visible: Inhalt soll über die Box hinausragen
overflow: hidden: Zu grosser Teil soll ausgeblendet werden
overflow: scroll: Scrollbalken anzeigen

Genauere Beschreibungen findest du z.B. auf https://css-tricks.com/css-is-awesome/

🛠️ Aufgaben zum Boxmodell

Style deine Website "Über mich" weiter und ¨berprüfe nach jedem Schritt das Ergebnis im Browser.

Stelle sicher, dass deine Seite die semantischen Strukturelemente <header>, <main> und <footer> enthält. Sie sollen direkt unter dem <body>-Element sein, also nicht tiefer verschachtelt. Die drei Blöcke sollen unterschiedliche Hintergrundfarben haben, damit du sie besser erkennst.

Die drei semantischen Strukturelemente soll einen Innenabstand von 40px haben.
Der Header soll 200px hoch sein.
Teste im Browser mit den Entsicklungswerkzeugen (Untersuchen / F12), ob die Abstände richtig angezeigt werden.
Überprüfe den Code anschliessend mit dem CSS-Validator und korrigiere allfällige Fehler.

PreviousCSS-Selektoren NextCSS-Validierung

Last updated 7 days ago

Was this helpful?