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 13:26] – 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?400|}}+\\ 
 +{{: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>
 +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> <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%> <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 57: Zeile 141:
 </html> </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> <tabbox Links>
   * [[https://little-boxes.de/lb1/7.2-das-box-modell-in-der-uebersicht.html]]   * [[https://little-boxes.de/lb1/7.2-das-box-modell-in-der-uebersicht.html]]