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:56] kdemircimodul:m287:learningunits:lu03:aufgaben:box-modell [2025/03/14 08:24] (aktuell) kdemirci
Zeile 7: Zeile 7:
   - 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 43: Zeile 43:
 ==== Aufgabenstellung ==== ==== Aufgabenstellung ====
  
-  - Erstellen Sie 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.
   - Weisen Sie 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.
   - 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.   - 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.
Zeile 52: Zeile 52:
 ^ 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.1741935401.txt.gz
  • Zuletzt geändert: 2025/03/14 07:56
  • von kdemirci