modul:m287:learningunits:lu03:aufgaben:box-modell

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
modul:m287:learningunits:lu03:aufgaben:box-modell [2025/03/14 07:54] – kdemircimodul:m287:learningunits:lu03:aufgaben:box-modell [2025/03/14 08:24] (aktuell) – kdemirci
Zeile 3: Zeile 3:
 ===== Aufgabe 1: Theoriefragen zum CSS-Box-Modell ===== ===== Aufgabe 1: Theoriefragen zum CSS-Box-Modell =====
  
-Beantworte die folgenden Fragen:+Beantworten Sie die folgenden Fragen:
  
   - Was versteht man unter dem CSS-Box-Modell und welche Bestandteile umfasst es?   - Was versteht man unter dem CSS-Box-Modell und welche Bestandteile umfasst es?
   - Wie unterscheidet sich das klassische vom neuen Box-Modell in Bezug auf die Berechnung der Elementbreite?   - Wie unterscheidet sich das klassische vom neuen Box-Modell in Bezug auf die Berechnung der Elementbreite?
-  - Was passiert, wenn zwei vertikale Aussenabstaende (Margins) aufeinandertreffen?+  - Was passiert, wenn zwei vertikale Aussenabstände (Margins) aufeinandertreffen?
  
 ==== Rahmenbedingungen ===== ==== Rahmenbedingungen =====
Zeile 18: Zeile 18:
  
 ===== Aufgabe 2: Übung zum CSS-Box-Modell ===== ===== Aufgabe 2: Übung zum CSS-Box-Modell =====
- 
-==== Beschreibung ==== 
-In dieser Aufgabe sollst du ein einfaches HTML-Dokument erstellen und mithilfe des CSS-Box-Modells verschiedene Layout-Eigenschaften anwenden. 
  
 ==== Ausgangslage ==== ==== Ausgangslage ====
-Erstelle eine Datei ''index.html'' mit folgendem Inhalt:+Erstellen Sie eine Datei ''index.html'' mit folgendem Inhalt:
  
 <code html> <code html>
Zeile 46: Zeile 43:
 ==== Aufgabenstellung ==== ==== Aufgabenstellung ====
  
-  - Erstelle eine CSS-Datei ''styles.css'' und verknuepfe sie mit der HTML-Datei. +  - Erstellen Sie eine CSS-Datei ''styles.css'' und verknüpfen Sie die CSS-Datei mit der HTML-Datei. 
-  - Weise der Klasse ''.container'' eine feste Breite von 400px, einen Innenabstand (''padding'') von 20px und einen Rahmen von 2px solid schwarz zu. +  - Weisen Sie der Klasse ''.container'' eine feste Breite von 400px, einen Innenabstand (''padding'') von 20px und einen Rahmen von 2px solid schwarz zu. 
-  - Erstelle eine zweite CSS-Regel fuer ''.new-box'', die das neue Box-Modell (''box-sizing: border-box'') verwendet und sich in der Breite von der Standardbox unterscheidet. +  - 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. 
-  - Weise dem gesamten ''<body>'' eine Hintergrundfarbe zu, um den Unterschied zwischen den Box-Modellen besser sichtbar zu machen. +  - Weisen Sie dem gesamten ''<body>'' eine Hintergrundfarbe zu, um den Unterschied zwischen den Box-Modellen besser sichtbar zu machen. 
-  - Teste das Verhalten der Boxen mit und ohne das neue Box-Modell. +  - Testen Sie das Verhalten der Boxen mit und ohne das neue Box-Modell.
- +
-Teste deine Loesung, indem du die HTML-Datei in einem Browser oeffnest!+
  
 ==== Rahmenbedingungen ===== ==== Rahmenbedingungen =====
 ^ Was ^ Beschreibung ^ ^ Was ^ Beschreibung ^
 | Produkt | HTML- und CSS-Datei | | Produkt | HTML- und CSS-Datei |
-| Zeit | 15 Min. |+| Zeit | 10 Min. |
 | Sozialform | Einzel- oder Partnerarbeit | | Sozialform | Einzel- oder Partnerarbeit |
  
  • modul/m287/learningunits/lu03/aufgaben/box-modell.1741935253.txt.gz
  • Zuletzt geändert: 2025/03/14 07:54
  • von kdemirci