Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
informatik:css:css-lernpfad-box-modell [2018/10/15 23:17] – jonathan.pfeifferinformatik: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.\\ Alle Boxen sind nach einem bestimmten Schema aufgebaut; das Box-Modell genannt wird.\\
 Die Abbildung zeigt eine schematische Darstellung des Box-Modells.\\ Die Abbildung zeigt eine schematische Darstellung des Box-Modells.\\
-{{:informatik:css-box-modell.png?250|}}+\\ 
 +{{:informatik:css-box-modell.png?538|}}
  
 <tabbox Begriffe> <tabbox Begriffe>
Zeile 89: Zeile 90:
 <html> <html>
 <iframe src="https://learningapps.org/watch?app=5706584" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> <iframe src="https://learningapps.org/watch?app=5706584" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
-<tabbox Gesamtbreite> 
 </html> </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 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
Zeile 116: Zeile 127:
 | Gesamtbreite der Box    | 780px  |    | Gesamtbreite der Box    | 780px  |   
  
-<tabbox #4>+<tabbox #5>
 <html> <html>
 <iframe src="https://learningapps.org/watch?app=5706469" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> <iframe src="https://learningapps.org/watch?app=5706469" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
 </html> </html>
  
-<tabbox #5>+<tabbox #6>
 <WRAP center round important 60%> <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]] Um die unten angeführte Learningapp bearbeiten zu können, musst du folgenden Link aufrufen: [[https://thimbleprojects.org/jonathanpf/560287]]
Zeile 130: Zeile 141:
 </html> </html>
 \\ \\
-<tabbox #6> +<tabbox #7> 
-**Wiederholung zu CSS**+**Wiederholung zu CSS**\\
 \\ \\
 <html> <html>