Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu03:grundlagen [2025/03/14 07:25] – kdemirci
+++ modul:m287:learningunits:lu03:grundlagen [2025/03/14 08:18] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
-====== CSS-Box-Modell ======
+====== LU03a - Box-Modell ======
 Als Grundlage für das Positionieren von Elementen und das Erstellen eines Layouts dient in CSS das Box-Model (oder auch Kastenmodell). In diesem Teil werden das //klassische// und das //neue, intuitivere// Box-Modell vorgestellt.
@@ Zeile 7: / Zeile 7: @@
   * **Padding** (Innenabstand)
   * **Border** (Rahmen)
-  * **Margin** (Außenabstand)
+  * **Margin** (Aussenabstand)
 {{:modul:m287:learningunits:lu03:box-modell_einfach.png?600|}}
 Jede dieser Boxen kann in **top**, **right**, **bottom** und **left** unterteilt werden.
+{{:modul:m287:learningunits:lu03:box-modell_detailliert.gif?600|}}
 ===== Innenabstand angeben =====
@@ Zeile 33: / Zeile 35: @@
 </code>
-===== Den Außenabstand =====
+===== Den Aussenabstand =====
-Die CSS-Eigenschaft ''margin'' legt den Außenabstand zu anderen Elementen fest.
+Die CSS-Eigenschaft ''margin'' legt den Aussenabstand zu anderen Elementen fest.
 **Beispiel:**
@@ Zeile 43: / Zeile 45: @@
 </code>
-===== Zusammenfallende vertikale Außenabstände (Collapsing Margins) =====
+===== Zusammenfallende vertikale Aussenabstände (Collapsing Margins) =====
-Wenn sich zwei vertikale Margins treffen, verschmelzen sie zum größeren Wert.
+Wenn sich zwei vertikale Margins treffen, verschmelzen sie zum grösseren Wert.
-{{ :themen/css/box/img/box-modell_collapsing-margins.png?direct |Collapsing Margins}}
+{{:modul:m287:learningunits:lu03:box-modell_collapsing-margins.png?600|}}
 ===== Das neue Box-Modell =====
 Im neuen Box-Modell wird ''padding'' und ''border'' in die Breite und Höhe eines Elements eingerechnet.
-{{ :themen/css/box/img/box-modell_new.png?direct |Das neue Box-Modell}}
+{{:modul:m287:learningunits:lu03:box-modell_new.png?600|}}
 **Beispiel:**
@@ Zeile 63: / Zeile 65: @@
 Das neue Box-Modell kann mit der CSS-Eigenschaft ''box-sizing: border-box'' aktiviert werden.
-**Beispiel:**
+**Beispiel 1 (Einzelne Elemente):**
 <code>
 div {
@@ Zeile 70: / Zeile 72: @@
 </code>
-===== Quellen =====
+**Beispiel 2 (Alle Elemente):**
-  * [[http://www.rheinwerk-verlag.de|Rheinwerk-Verlag]]
+<code>
+* {
+    box-sizing: border-box;
+}
+</code>