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 22:47] – 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?300|}}+\\ 
 +{{:informatik:css-box-modell.png?538|}}
  
 <tabbox Begriffe> <tabbox Begriffe>
Zeile 30: Zeile 31:
  
 Beachte, dass ''width'' die Breite des Inhaltsbereichs definiert, und nicht die Gesamtbreite des Elements. Beachte, dass ''width'' die Breite des Inhaltsbereichs definiert, und nicht die Gesamtbreite des Elements.
 +\\
 +\\
 +{{:informatik:css:css-box-modell-begriffe.png?400|}}
  
 <tabbox #2> <tabbox #2>
Zeile 48: Zeile 52:
   * ''padding-bottom'' für den unteren Innenabstand    * ''padding-bottom'' für den unteren Innenabstand 
   * ''padding-left'' für den linken Innenabstand   * ''padding-left'' für den linken Innenabstand
 +
 +\\
 +\\
 +{{:informatik:css:css-box-modell-begriffe.png?400|}}
  
 <tabbox Rahmen> <tabbox Rahmen>
Zeile 58: Zeile 66:
   * ''border-left'' für die linke Rahmenlinie   * ''border-left'' für die linke Rahmenlinie
  
 +\\
 +\\
 +{{:informatik:css:css-box-modell-begriffe.png?400|}}
 <tabbox Außenabstand> <tabbox Außenabstand>
  
Zeile 67: Zeile 78:
   * ''margin-left'' für den linken 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. 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> <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 95: Zeile 127:
 | Gesamtbreite der Box    | 780px  |    | Gesamtbreite der Box    | 780px  |   
  
-<tabbox #3>+<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 #4>+<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 109: Zeile 141:
 </html> </html>
 \\ \\
-<tabbox #5> +<tabbox #7> 
-**Wiederholung zu CSS**+**Wiederholung zu CSS**\\
 \\ \\
 <html> <html>