Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- informatik:css:css-lernpfad-box-modell [2018/10/15 12:57] – jonathan.pfeiffer
+++ informatik:css:css-lernpfad-box-modell [2020/06/10 18:59] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 7: / Zeile 7: @@
 Alle Boxen sind nach einem bestimmten Schema aufgebaut; das Box-Modell genannt wird.\\
 Die Abbildung zeigt eine schematische Darstellung des Box-Modells.\\
-{{:informatik:css-box-modell.png?400|}}
+\\
+{{:informatik:css-box-modell.png?538|}}
 <tabbox Begriffe>
@@ Zeile 30: / Zeile 31: @@
 Beachte, dass ''width'' die Breite des Inhaltsbereichs definiert, und nicht die Gesamtbreite des Elements.
+\\
+\\
+{{:informatik:css:css-box-modell-begriffe.png?400|}}
 <tabbox #2>
@@ Zeile 39: / Zeile 43: @@
 Nach dem Inhaltsbereich folgt in jeder Box der Innenabstand (''padding''). Das padding liegt innerhalb der Box und übernimmt die Hintergrundfarbe des Inhaltsbereichs. \\
 \\
-**Der Innenabstand ist ein erzwungener Leerraum zwischen dem Inhaltsbreich (content) eines Elements und seinem Elementrand.**\\
+**Der Innenabstand ist ein erzwungener Leerraum zwischen dem Inhaltsbereich (content) eines Elements und seinem Elementrand.**\\
 \\
@@ Zeile 49: / Zeile 53: @@
   * ''padding-left'' für den linken Innenabstand
+\\
+\\
+{{:informatik:css:css-box-modell-begriffe.png?400|}}
+<tabbox Rahmen>
+Um das padding legt sich der Rahmen (''border''), der Rand der Kiste, der eine eigene Breite (width), Linienart (style) und Farbe (color) annehmen kann.\\
+Auch ''border'' kann für alle vier Seiten unterschiedlich sein. Die Eigenschaften heißen dann:
+  * ''border-top'' für die Rahmenlinie oben
+  * ''border-right'' für die rechte Rahmenlinie
+  * ''border-bottom'' für die untere Rahmenlinie
+  * ''border-left'' für die linke Rahmenlinie
+\\
+\\
+{{:informatik:css:css-box-modell-begriffe.png?400|}}
+<tabbox Außenabstand>
+Jede Box kann einen Außenabstand (''margin'') haben, der ebenfalls für alle vier Seiten einzeln definiert werden kann:
+  * ''margin-top'' für den oberen Außenabstand
+  * ''margin-right'' für den rechten Außenabstand
+  * ''margin-bottom'' für den unteren Außenabstand
+  * ''margin-left'' für den linken Außenabstand
+**Der Außenabstand (''margin'') ein erzwungener Leerraum zwischen dem aktuellen Element und seinem Eltern- bzw.
+seinen Nachbarelementen.**\\
+\\
+Der Außenabstand übernimmt die Hintergrundfarbe des umgebenden Elements.
+\\
+\\
+{{:informatik:css:css-box-modell-begriffe.png?400|}}
+<tabbox #3>
+<html>
+<iframe src="https://learningapps.org/watch?app=5706584" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
+</html>
+<tabbox #4>
+<WRAP center round todo 80%>
+  * Öffne das Thimble Projekt. https://thimbleprojects.org/jonathanpf/561117
+  * Verändere die Werte bei margin und padding. Spiele mit den Werten und beobachte die Veränderungen.
+  * Bekommen ein Gefühl für das Box-Modell.
+</WRAP>
+<tabbox Gesamtbreite>
+Auf den ersten Blick ungewöhnlich ist die Berechnung der **Gesamtbreite** einer Box. ''width'' heißt zwar »Breite«, damit ist aber wie erwähnt nicht die Gesamtbreite der Box gemeint, sondern die Breite des
+Inhaltsbereichs.\\
+\\
+Zur Erklärung ein Beispiel, dem folgende CSS-Regel zugrunde liegt:\\
+<code css>
+div {
+  width: 720px;
+  padding: 20px;
+  border: 0;
+  margin: 10px;
+}
+</code>
+\\
+Die Gesamtbreite der Box setzt sich aus width, padding, border und margin zusammen:
+^ Berechnung       ^ Beispiel ^
+| width    | 720px |
+| + padding-right    | + 20px |
+| + padding-left    | + 20px  |
+| + border-right-width    | + 0  |
+| + border-left-width    | + 0  |
+| + margin-right    | + 10px  |
+| + margin-left    | + 10px  |
+| Gesamtbreite der Box    | 780px  |
+<tabbox #5>
+<html>
+<iframe src="https://learningapps.org/watch?app=5706469" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
+</html>
+<tabbox #6>
+<WRAP center round important 60%>
+Um die unten angeführte Learningapp bearbeiten zu können, musst du folgenden Link aufrufen: [[https://thimbleprojects.org/jonathanpf/560287]]
+</WRAP>
+\\
+<html>
+<iframe src="https://learningapps.org/watch?app=5701822" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
+</html>
+\\
+<tabbox #7>
+**Wiederholung zu CSS**\\
+\\
+<html>
+<iframe src="https://learningapps.org/watch?v=p6it8umi317" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
+</html>
 <tabbox Links>
   * [[https://little-boxes.de/lb1/7.2-das-box-modell-in-der-uebersicht.html]]