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
Letzte ÜberarbeitungBeide Seiten, nächste Überarbeitung
informatik:css:css-lernpfad-box-modell [2018/10/15 23:20] – jonathan.pfeifferinformatik:css:css-lernpfad-box-modell [2018/10/16 09:32] – jonathan.pfeiffer
Zeile 90: 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 117: 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 131: Zeile 141:
 </html> </html>
 \\ \\
-<tabbox #6> +<tabbox #7> 
-**Wiederholung zu CSS**+**Wiederholung zu CSS**\\
 \\ \\
 <html> <html>