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:18] – 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?538|}} {{:informatik:css-box-modell.png?538|}}
  
Zeile 32: Zeile 33:
 \\ \\
 \\ \\
-{{:informatik:css:css-box-modell-begriffe.png?300|}}+{{:informatik:css:css-box-modell-begriffe.png?400|}}
  
 <tabbox #2> <tabbox #2>
Zeile 54: Zeile 55:
 \\ \\
 \\ \\
-{{:informatik:css:css-box-modell-begriffe.png?300|}}+{{:informatik:css:css-box-modell-begriffe.png?400|}}
  
 <tabbox Rahmen> <tabbox Rahmen>
Zeile 67: Zeile 68:
 \\ \\
 \\ \\
-{{:informatik:css:css-box-modell-begriffe.png?300|}}+{{:informatik:css:css-box-modell-begriffe.png?400|}}
 <tabbox Außenabstand> <tabbox Außenabstand>
  
Zeile 84: Zeile 85:
 \\ \\
 \\ \\
-{{:informatik:css:css-box-modell-begriffe.png?300|}}+{{:informatik:css:css-box-modell-begriffe.png?400|}}
  
 <tabbox #3> <tabbox #3>
 <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>