Box-Modell und Layout

Das CSS Box-Modell ist ein fundamentales Konzept, das beschreibt, wie HTML-Elemente auf einer Webseite dargestellt und bemessen werden. Jedes Element wird als eine rechteckige Box betrachtet, die aus mehreren Schichten besteht. Das Verständnis dieses Modells ist entscheidend für präzises Layout und Design.

Das CSS Box-Modell verstehen

Jede Box in CSS besteht aus vier Hauptkomponenten (von innen nach aussen):

1. Content (Inhalt): Der Bereich, in dem Ihr Text und Bilder angezeigt werden
2. Padding (Innenabstand): Der transparente Bereich zwischen dem Inhalt und dem Rahmen
3. Border (Rahmen): Eine Linie, die um das Padding herum verläuft
4. Margin (Aussenabstand): Der transparente Bereich ausserhalb des Rahmens, der Abstand zu anderen Elementen schafft

Das Standard-Box-Modell

Im Standard-Box-Modell werden die angegebenen Höhe (height) und Breite (width) nur auf den Inhaltsbereich angewendet. Die Gesamtgrösse eines Elements berechnet sich dann als:

• Gesamtbreite = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
• Gesamthöhe = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

Bei diesem Beispiel beträgt die tatsächliche Breite der Box: 300px (Inhalt) + 40px (Padding links und rechts) + 10px (Border links und rechts) = 350px.

Das alternative Box-Modell (box-sizing: border-box)

Um die Berechnung von Elementgrössen zu vereinfachen, können Sie das alternative Box-Modell verwenden, indem Sie die box-sizing-Eigenschaft auf border-box setzen:

* {
  box-sizing: border-box;
}

Mit dieser Einstellung umfassen die angegebenen Höhe und Breite den Inhalt, das Padding und den Border. Nur die Margins werden extra berechnet. Dadurch wird die Arbeit mit Layouts erheblich vereinfacht.

Margins, Borders und Padding

Margins (Aussenabstände)

Margins erzeugen Abstand zwischen Elementen:

.box {
  /* Alle vier Seiten auf einmal */
  margin: 10px;

  /* Oben, Rechts, Unten, Links (im Uhrzeigersinn) */
  margin: 10px 15px 20px 25px;

  /* Oben/Unten und Rechts/Links */
  margin: 10px 15px;

  /* Einzelne Seiten */
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
}

Besonderheiten bei Margins

1. Margin Collapsing: Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zu einem einzelnen Margin, dessen Grösse dem grösseren der beiden entspricht.
2. Zentrieren mit Margins: Horizontales Zentrieren eines Elements mit fester Breite:

.centered {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

3. Negative Margins: Margins können auch negative Werte haben, wodurch Elemente näher aneinander rücken oder überlappen können.

Borders (Rahmen)

Borders umgeben das Element und können in Stil, Breite und Farbe angepasst werden:

.box {
  /* Kurzschreibweise: Breite, Stil, Farbe */
  border: 2px solid black;

  /* Einzelne Seiten */
  border-top: 1px dashed red;
  border-right: 2px dotted green;
  border-bottom: 3px double blue;
  border-left: 4px groove yellow;

  /* Einzelne Eigenschaften */
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

Border-Stile

Es gibt verschiedene Border-Stile:

• solid: durchgezogene Linie
• dashed: gestrichelte Linie
• dotted: gepunktete Linie
• double: doppelte Linie
• groove, ridge, inset, outset: dreidimensionale Effekte
• none: kein Rahmen (Standard)
• hidden: versteckter Rahmen

Abgerundete Ecken (border-radius)

Mit border-radius können Sie abgerundete Ecken erstellen:

.rounded {
  border-radius: 10px;             /* Alle Ecken gleich */
  border-radius: 10px 20px 30px 40px; /* Oben-links, Oben-rechts, Unten-rechts, Unten-links */
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;              /* Kreisförmig */
}

Padding (Innenabstände)

Padding schafft Raum zwischen dem Inhalt eines Elements und seinem Rahmen:

.box {
  /* Alle vier Seiten auf einmal */
  padding: 10px;

  /* Oben, Rechts, Unten, Links (im Uhrzeigersinn) */
  padding: 10px 15px 20px 25px;

  /* Oben/Unten und Rechts/Links */
  padding: 10px 15px;

  /* Einzelne Seiten */
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

Padding ist immer positiv und nimmt die Hintergrundfarbe oder das Hintergrundbild des Elements an.

Höhe und Breite von Elementen

Grundlegende Höhe und Breite

.box {
  width: 300px;         /* Absolute Breite */
  height: 200px;        /* Absolute Höhe */

  width: 50%;           /* Relative Breite (50% des Elternelements) */
  height: 50vh;         /* 50% der Viewport-Höhe */
}

Minimale und maximale Dimensionen

.responsive-box {
  width: 50%;           /* Grundbreite */
  min-width: 300px;     /* Mindestbreite */
  max-width: 800px;     /* Maximale Breite */

  height: auto;         /* Höhe basierend auf Inhalt */
  min-height: 200px;    /* Mindesthöhe */
  max-height: 600px;    /* Maximale Höhe */
}

Diese Eigenschaften sind besonders nützlich für responsive Designs.

Overflow-Verhalten

Wenn der Inhalt die festgelegte Grösse eines Elements überschreitet, können Sie mit der overflow-Eigenschaft steuern, wie damit umgegangen wird:

.container {
  height: 300px;
  overflow: visible;    /* Inhalt wird sichtbar sein, auch ausserhalb des Elements (Standard) */
}

.scrollable {
  height: 300px;
  overflow: auto;       /* Scrollbalken erscheinen bei Bedarf */
}

.hidden-overflow {
  height: 300px;
  overflow: hidden;     /* Überlaufender Inhalt wird abgeschnitten */
}

.scroll-y {
  height: 300px;
  overflow-y: scroll;   /* Vertikaler Scrollbalken immer anzeigen */
  overflow-x: hidden;   /* Horizontalen Overflow verbergen */
}

Display-Eigenschaften

Die display-Eigenschaft bestimmt, wie ein Element im Layout behandelt wird:

Block-Elemente

Block-Elemente nehmen die volle verfügbare Breite ein und beginnen immer in einer neuen Zeile:

.block {
  display: block;
}

Typische Block-Elemente sind <div>, <p>, <h1>-<h6>, <ul>, <li>, <section>.

Inline-Elemente

Inline-Elemente nehmen nur so viel Platz ein wie nötig und fliessen im Textfluss:

.inline {
  display: inline;
}

Bei Inline-Elementen werden width, height, margin-top und margin-bottom ignoriert.

Typische Inline-Elemente sind <span>, <a>, <strong>, <em>, <img>.

Inline-Block-Elemente

Inline-Block-Elemente kombinieren Eigenschaften von Block- und Inline-Elementen:

.inline-block {
  display: inline-block;
}

Sie fliessen im Textfluss wie Inline-Elemente, können aber gleichzeitig Höhe, Breite und vertikale Margins haben wie Block-Elemente.

Verstecken von Elementen

.hidden {
  display: none;        /* Element wird vollständig aus dem Layout entfernt */
}

.invisible {
  visibility: hidden;   /* Element ist unsichtbar, nimmt aber weiterhin Platz im Layout ein */
}

Praktische Anwendungen des Box-Modells

Einfache Karten (Cards) erstellen

.card {
  width: 300px;
  padding: 20px;
  margin: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.card-content {
  line-height: 1.5;
}

Rahmen mit Schatten

.fancy-border {
  border: 2px solid #3498db;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

Horizontales Menü

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
}

.menu li {
  display: inline-block;
}

.menu a {
  display: inline-block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.menu a:hover {
  background-color: #555;
}

Übung: Das Box-Modell in der Praxis

Aufgabe: Erstellen einer Profilkarte

1. Erstellen Sie eine neue HTML-Datei mit folgendem Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Box-Modell: Profilkarte</title>
  <link rel="stylesheet" href="profile-card.css">
</head>
<body>
  <div class="card">
    <div class="card-header">
      <img src="https://via.placeholder.com/150" alt="Profilbild" class="profile-image">
      <h2 class="name">Max Mustermann</h2>
      <p class="title">Web-Entwickler</p>
    </div>
    <div class="card-body">
      <p class="bio">Erfahrener Webentwickler mit Schwerpunkt auf Frontend-Technologien. Leidenschaftlich für reaktionsschnelle, benutzerfreundliche Designs.</p>
      <div class="stats">
        <div class="stat">
          <span class="value">125</span>
          <span class="label">Projekte</span>
        </div>
        <div class="stat">
          <span class="value">3.4k</span>
          <span class="label">Followers</span>
        </div>
        <div class="stat">
          <span class="value">42</span>
          <span class="label">Auszeichnungen</span>
        </div>
      </div>
    </div>
    <div class="card-footer">
      <button class="btn primary">Kontakt</button>
      <button class="btn secondary">Profil</button>
    </div>
  </div>
</body>
</html>

2. Erstellen Sie eine neue Datei namens profile-card.css im gleichen Ordner.
3. Gestalten Sie die Profilkarte mit folgenden Anforderungen:

• Die Karte sollte einen festen maximalen Breite haben (z.B. 350px) und zentriert sein
• Fügen Sie einen Rahmen und abgerundete Ecken hinzu
• Verwenden Sie Padding, um den Inhalt von den Rändern der Karte zu trennen
• Das Profilbild sollte kreisförmig sein
• Die drei Bereiche der Karte (Header, Body, Footer) sollten klar voneinander getrennt sein
• Die Statistiken sollten nebeneinander angezeigt werden (Hinweis: verwenden Sie display: inline-block oder float)
• Die Buttons sollten ansprechend gestaltet sein (mit Padding, Farbe, Border-Radius)
• Experimentieren Sie mit Schatten, um der Karte mehr Tiefe zu verleihen
• Verwenden Sie box-sizing: border-box für alle Elemente

4. Extra-Herausforderung: Fügen Sie hover-Effekte für die Buttons hinzu!

Im nächsten Kapitel werden wir uns mit Farben und Hintergründen in CSS beschäftigen und lernen, wie Sie Ihre Webseite mit Farbschemata, Hintergrundbildern und Verläufen visuell ansprechender gestalten können.