# 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.

<div align="center"><img src="https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-ca09ee95e9df35d5be160ec267b6c4f1f27aac2f%2Fboxmodell-gif.gif?alt=media" alt="boxmodell-gif"></div>

## 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.

![Boxmodell](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-6fa13f38acc50aaf6acbcefc7b6cb412e9c5f388%2Fboxmodell.png?alt=media)

### 🛠️ Erforschen

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

### 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:&#x20;

```css
.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](https://www.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`.

```css
.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:&#x20;

```css
* {
    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:&#x20;

* `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.&#x20;

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.&#x20;

1. Die drei semantischen Strukturelemente soll einen Innenabstand von 40px haben.
2. Der Header soll 200px hoch sein.
3. Teste im Browser mit den Entsicklungswerkzeugen (Untersuchen / F12), ob die Abstände richtig angezeigt werden.
4. Überprüfe den Code anschliessend mit dem [CSS-Validator](https://jigsaw.w3.org/css-validator/#validate_by_input) und korrigiere allfällige Fehler.
