LU03.L01 - Box-Modell

Dies ist eine alte Version des Dokuments!

Beantworten Sie die folgenden Fragen:

Was versteht man unter dem CSS-Box-Modell und welche Bestandteile umfasst es?
- Das CSS-Box-Modell beschreibt, wie jedes HTML-Element als rechteckige Box aufgebaut ist.
- Es besteht aus vier Bereichen: Content (Inhalt), Padding (Innenabstand), Border (Rahmen) und Margin (Aussenabstand).
- Diese bestimmen gemeinsam die Größe und den Abstand eines Elements im Layout.

Wie unterscheidet sich das klassische vom neuen Box-Modell in Bezug auf die Berechnung der Elementbreite?
- Beim klassischen Modell (content-box) bezieht sich die Breite nur auf den Inhalt, Padding und Border werden zusätzlich addiert.
- Beim neuen Modell (border-box) sind Padding und Border bereits in der angegebenen Breite enthalten. Dadurch bleibt die Gesamtbreite konstant und besser berechenbar.
Was passiert, wenn zwei vertikale Aussenabstände (Margins) aufeinandertreffen?
- Treffen zwei vertikale Margins aufeinander, werden sie nicht addiert, sondern kollabieren.
- Es gilt dann nur der grössere der beiden Abstände.
- Dieses Verhalten nennt man Margin-Collapsing und tritt nur bei vertikalen Abständen auf.

Erstellen Sie eine Datei index.html mit folgendem Inhalt:

<!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 Uebung</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>CSS-Box-Modell</h1>
        <p>Dieser Absatz demonstriert das klassische Box-Modell.</p>
        <p class="new-box">Dieser Absatz demonstriert das neue Box-Modell.</p>
    </div>
</body>
</html>

Erstellen Sie eine CSS-Datei styles.css und verknüpfen Sie die CSS-Datei mit der HTML-Datei.
Weisen Sie der Klasse .container eine feste Breite von 400px, einen Innenabstand (padding) von 20px und einen Rahmen von 2px solid schwarz zu.
Erstellen Sie eine zweite CSS-Regel für .new-box, die das neue Box-Modell (box-sizing: border-box) verwendet und sich in der Breite von der Standardbox unterscheidet.
Weisen Sie dem gesamten <body> eine Hintergrundfarbe zu, um den Unterschied zwischen den Box-Modellen besser sichtbar zu machen.
Testen Sie das Verhalten der Boxen mit und ohne das neue Box-Modell.

Was	Beschreibung
Produkt	HTML- und CSS-Datei
Zeit	10 Min.
Sozialform	Einzel- oder Partnerarbeit

LU03.L01 - Box-Modell

Aufgabe 1: Theoriefragen zum CSS-Box-Modell

Aufgabe 2: Übung zum CSS-Box-Modell

Ausgangslage

Aufgabenstellung

Rahmenbedingungen

BZZ - Modulwiki