de:modul:m287:learningunits:lu03:loesungen:box-modell

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m287:learningunits:lu03:loesungen:box-modell [2026/03/17 14:43] – angelegt vdemirde:modul:m287:learningunits:lu03:loesungen:box-modell [2026/03/17 14:52] (aktuell) – vdemir
Zeile 4: Zeile 4:
  
 Beantworten Sie die folgenden Fragen: Beantworten Sie die folgenden Fragen:
- +**1. 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? +  * Das CSS-Box-Modell beschreibt, wie jedes HTML-Element als rechteckige Box aufgebaut ist.  
-    * 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).  
-    * Es besteht aus vier Bereichen: Content (Inhalt), Padding (Innenabstand), Border (Rahmen) und Margin (Aussenabstand).  +  * Diese bestimmen gemeinsam die Grösse und den Abstand eines Elements im Layout. 
-    * Diese bestimmen gemeinsam die Größe und den Abstand eines Elements im Layout. +    
-  +**2. 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? +  * Beim klassischen Modell (content-box) bezieht sich die Breite nur auf den Inhalt, Padding und Border werden zusätzlich addiert.  
-    * 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.  
-    * 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? +**3. Was passiert, wenn zwei vertikale Aussenabstände (Margins) aufeinandertreffen?** 
-    * Treffen zwei vertikale Margins aufeinander, werden sie nicht addiert, sondern //kollabieren//.  +  * Treffen zwei vertikale Margins aufeinander, werden sie nicht addiert, sondern //kollabieren//.  
-    * Es gilt dann nur der grössere der beiden Abstände.  +  * 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. +  * Dieses Verhalten nennt man Margin-Collapsing und tritt nur bei vertikalen Abständen auf. 
  
 ---- ----
Zeile 35: Zeile 35:
 </head> </head>
 <body> <body>
-    <div class="container"> +<div class="wrapper"> 
-        <h1>CSS-Box-Modell</h1> +  <div class="container"> 
-        <p>Dieser Absatz demonstriert das klassische Box-Modell.</p> +    <h2>Klassisches Modell</h2> 
-        <p class="new-box">Dieser Absatz demonstriert das neue Box-Modell.</p> +    <p> 
-    </div>+      Dieser Absatz demonstriert das klassische Box-Modell.  
 +      Durch Padding und Border wird die Box breiter als die angegebenen 400px (ca. 520px). 
 +      Nachweis: 400 + der Rest 
 +    </p> 
 +  </div> 
 + 
 +  <div class="container new-box"> 
 +    <h2>Border-Box</h2> 
 +    <p> 
 +      Dieser Absatz demonstriert das neue Box-Modell. Die Gesamtbreite bleibt gleich bei 400px,  
 +      egal wie gross Padding und Border sind. 
 +      Nachweiss: 400 inkl. dem Rest 
 +    </p> 
 +  </div> 
 +</div> 
 + 
 +    
 </body> </body>
-</html> +</html></code>
-</code>+
  
 ==== Aufgabenstellung ==== ==== Aufgabenstellung ====
Zeile 51: Zeile 66:
   - Weisen Sie 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.
   - Testen Sie das Verhalten der Boxen mit und ohne das neue Box-Modell.   - Testen Sie das Verhalten der Boxen mit und ohne das neue Box-Modell.
 +<code css>
 +body {
 +  background: red;
 +}
 +body {
 +  background-color: lightgray;
 +  font-family: Arial, sans-serif;
 +}
  
-==== Rahmenbedingungen ===== +/* nebeneinander */ 
-^ Was ^ Beschreibung ^ +.wrapper { 
-| Produkt | HTML- und CSS-Datei | +  display: flex; 
-| Zeit | 10 Min. | +  gap: 40px; 
-| Sozialform | Einzel- oder Partnerarbeit |+  margin: 40px; 
 +}
  
 +/* beide Boxen */
 +.container {
 +  width: 400px;
 +  padding: 50px;
 +  border: 10px solid black;
 +  background-color: white;
 +}
 +
 +/* neues Boxmodell */
 +.new-box {
 +  width: 400px;
 +  padding: 50px;
 +  box-sizing: border-box;
 +  background-color: #d9edf7;
 +}
 +</code>
 +
 +
 +----
 +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
  • de/modul/m287/learningunits/lu03/loesungen/box-modell.1773755016.txt.gz
  • Zuletzt geändert: 2026/03/17 14:43
  • von vdemir