de:modul:m287:learningunits:lu03:loesungen: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
de:modul:m287:learningunits:lu03:loesungen:box-modell [2026/03/17 14:45] – 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 25: Zeile 25:
 Erstellen Sie eine Datei ''index.html'' mit folgendem Inhalt: Erstellen Sie eine Datei ''index.html'' mit folgendem Inhalt:
  
 +<code html>
 +<!DOCTYPE html>
 <html lang="de"> <html lang="de">
 <head> <head>
Zeile 42: Zeile 44:
     </p>     </p>
   </div>   </div>
 +
   <div class="container new-box">   <div class="container new-box">
     <h2>Border-Box</h2>     <h2>Border-Box</h2>
Zeile 50: Zeile 53:
     </p>     </p>
   </div>   </div>
-</div> +</div> 
 + 
 +    
 </body> </body>
-</html>+</html></code>
  
 ==== Aufgabenstellung ==== ==== Aufgabenstellung ====
Zeile 61: 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.1773755101.txt.gz
  • Zuletzt geändert: 2026/03/17 14:45
  • von vdemir