05 – Box-Modell 📦

Verstehe, wie jede Box im Web aufgebaut ist

🎯 1. Einleitung & W3Schools

In Kapitel 05 hast du gelernt, dass jedes HTML-Element eine Box ist – bestehend aus Inhalt, Padding, Border und Margin.

Lies aktiv auf W3Schools nach – probiere aus, denke nach:

🧠 2. KI-Prompt-Training – verstehe die Schichten

Deine Aufgabe: Formuliere einen Prompt, der keine CSS-Regeln liefert, sondern dir hilft, zu verstehen, wie sich die Box-Schichten auf die Gesamtbreite auswirken.

❌ Vermeide: „Gib mir CSS für eine Box mit Padding und Border.“ ✅ Fragen, die denken erzwingen:

„Warum wird eine Box mit width: 200px, padding: 10px und border: 2px breiter als 200px?“
„Erkläre mir, wie box-sizing: border-box dieses Problem löst.“
„Welche vier Schichten hat jede Box – und in welcher Reihenfolge wirken sie?“

💡 Merke: Wenn die KI dir CSS gibt, hast du die falsche Frage gestellt. Ziel ist Verständnis – nicht die fertige Lösung.

🔍 Aufgabe 1: Analysiere – nicht rechne!

Ein Schüler hat folgendes CSS geschrieben:

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

Schreibe (auf Papier oder in Textdatei):

Wie breit ist die Box insgesamt im Standard-Modus? (Rechne Schritt für Schritt: Inhalt + Padding + Border)
Warum führt das oft zu unerwarteten Layout-Problemen – besonders bei mehreren Boxen nebeneinander?
Wie löst box-sizing: border-box dieses Problem? Erkläre in eigenen Worten.
Warum ist es wichtig, * { box-sizing: border-box; } am Anfang jeder CSS-Datei zu setzen?

⚠️ Hinweis: Wer nur die Zahl „250px“ hinschreibt, hat die Aufgabe nicht verstanden. Es geht um Begründung, nicht um Rechnen!

🧱 Aufgabe 2: Baue bewusst – erst nach der Analyse!

Erstelle eine HTML-Datei boxen.html und eine CSS-Datei css/boxen.css mit folgenden Anforderungen:

Zwei <div>-Elemente mit der Klasse box
Jede Box: width: 300px, padding: 20px, border: 3px solid #e67e22, margin: 15px
Im <head>: <link rel="stylesheet" href="css/boxen.css">
Am Anfang der CSS-Datei: * { box-sizing: border-box; }

💡 Teste selbst:
- Öffne mit VS Code Live Server
- Prüfe im Entwickler-Tools (F12): Wie breit ist jede Box wirklich?
- Ändere den box-sizing auf content-box: Was passiert?

📊 Beurteilungskriterien – Übung 05: Box-Modell

Deine Lösung wird im Fachgespräch bewertet – besonders dein eigenes Verständnis.

Kriterium	✅	➖	❌
Verständnis des Box-Modells: Kannst du im Gespräch erklären, aus welchen vier Schichten eine Box besteht – und wie sie sich auf die Gesamtbreite auswirken?
box-sizing: border-box: Weißt du, warum diese Regel das Layout vorhersehbar macht – und warum sie am Anfang jeder CSS-Datei stehen sollte?
Praktische Anwendung: Kannst du die Werte für Padding, Border und Margin bewusst setzen – und im Entwickler-Tools verifizieren?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung ohne Code-Datei im Fachgespräch erklären – oder musst du erst nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du gefragt: „Warum ist die Box mit content-box breiter als 300px?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.