Skip to main content
CSS, Box-Modell und responsive Layouts
Alle Lehrpfade5. Web-Grundlagen
intermediate+30 XP

CSS, Box-Modell und responsive Layouts

💡 Die Kernidee im Alltag:

"Abstände, Flexbox, Grid und mobile Umbrüche einsetzen."

Konzepte verständlich erklärt (für Einsteiger jeden Alters)

Lernziele

Abstände, Flexbox, Grid und mobile Umbrüche einsetzen. Nach dieser Lektion kannst du das Konzept erklären, ein kleines Beispiel umsetzen und typische Grenzen benennen.

Erklärung

Das Box-Modell setzt sich aus Inhalt, Padding, Border und Margin zusammen. Flexbox ordnet Elemente entlang einer Achse, Grid in Zeilen und Spalten. Media Queries passen Layouts an verfügbare Breite und Nutzereinstellungen an.

Schrittweises Beispiel

box-sizing: border-box macht angegebene Breite inklusive Padding und Rand berechenbarer. Eine Grid-Karte mit repeat(auto-fit, minmax(16rem, 1fr)) bricht flexibel um.

<div class="cards"><article>Karte A</article><article>Karte B</article><article>Karte C</article></div>
<style>.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}</style>

Zusammenfassung

Baue mobile zuerst und lasse Inhalte wachsen; Layouttechnik folgt der Beziehung zwischen Elementen.

Lerncheck & Übung

Etwa 35 Minuten · intermediate

Das lernst du

  • Erkläre die Kernidee von „CSS, Box-Modell und responsive Layouts“ in eigenen Worten.
  • Wähle eine passende Technik für einen konkreten Anwendungsfall.
  • Erkenne mindestens eine typische Fehlerquelle.

Voraussetzungen

  • Keine Zugriffsvoraussetzungen. Vorwissen wird in der Erklärung eingeführt.

Häufige Fehler

  • Fixe Pixelbreiten verursachen Überlauf. `z-index` wirkt innerhalb von Stacking Contexts und ist kein globaler Rang. Teste Zoom und schmale Viewports.

Wissenscheck

Wann passt Flexbox besonders gut?

Praktische Aufgabe

Erstelle drei Karten, die bei wenig Platz automatisch untereinander fließen.

KI-Power-Tipp für Entwickler
Empfohlener Assistent: Optionaler Lernpartner (ohne Verbindung aus dieser Plattform)
Golden Prompt für deinen Editor:
Prüfe meine Erklärung zu „CSS, Box-Modell und responsive Layouts“: Nenne eine fehlende Annahme und stelle mir eine Gegenfrage.
Qualitäts-Prüfung: Vergleiche die Antwort mit dem Beispiel und prüfe Randfälle eigenständig.

Interaktive Übung & lokaler Testlauf

Erstelle drei Karten, die bei wenig Platz automatisch untereinander fließen.

Hinweise auf Wunsch anzeigen
  • Zerlege die Aufgabe in Eingabe, Verarbeitung und erwartete Ausgabe.
  • Prüfe auch einen leeren oder ungültigen Fall.