informatik:html-css:box-modell [Unterrichtswiki

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== Box-Modell ======
<accordion>
<panel type="primary" title="Box-Modell">
Eine HTML-Webseite besteht aus rechteckigen Kästchen (Box). **Alle** Texte und Grafiken einer Webseite liegen in solchen Kästchen oder Boxen.

\\
Alle Boxen sind nach einem bestimmten Schema aufgebaut; das Box-Modell genannt wird.\\
Die Abbildung zeigt eine schematische Darstellung des Box-Modells.\\
\\
{{:informatik:html-css:css-box-modell.png?538|}}

</panel>

<panel type="primary" title="Begriffe">
Fast alle HTML-Elemente haben die **Eigenschaften** width, height, padding, border und margin.\\
^ Englisch       ^ Deutsch                                                  ^ 
| content    | Inhalt                                                  | 
| width    | Breite |
| padding    | Innenabstand, Polsterung                                                  | 
| border| Rahmen                                                  |
| margin | Außenabstand, Rand                                                  |

</panel>

<panel type="success" title="Aufgabe #1">

{{url>https://learningapps.org/watch?app=5701530 80%,600px|iFrame not installed}}




</panel>

<panel type="primary" title="Inhaltsbereich">
Text und Grafiken stehen im **Inhaltsbereich** eines Elements, dessen Breite mit width und dessen Höhe mit height definiert wird. Wenn diese Angaben nicht explizit im Stylesheet auftauchen, gelten die folgenden Grundregeln:\\
  * Ohne Angabe von ''width'' werden Block-Elemente so breit wie das umgebende Element.
  * Ohne Angabe von ''height'' werden alle Elemente nur so hoch wie ihr Inhalt.

Beachte, dass ''width'' die Breite des Inhaltsbereichs definiert, und nicht die Gesamtbreite des Elements.
\\
\\
{{:informatik:html-css:css-box-modell.png?538|}}

</panel>

<panel type="success" title="Aufgabe #2">
{{url>https://learningapps.org/watch?app=5701484 80%,600px|iFrame not installed}}


</panel>

<panel type="primary" title="Innenabstand">
Nach dem Inhaltsbereich folgt in jeder Box der Innenabstand (''padding''). Das padding liegt innerhalb der Box und übernimmt die Hintergrundfarbe des Inhaltsbereichs. \\
\\
**Der Innenabstand ist ein erzwungener Leerraum zwischen dem Inhaltsbereich (content) eines Elements und seinem Elementrand.**\\
\\


''padding'' kann für alle vier Seiten einer Box einzeln definiert werden. Die Eigenschaften heißen dann wie folgt:
  * ''padding-top'' für den oberen Innenabstand 
  * ''padding-right'' für den rechten Innenabstand 
  * ''padding-bottom'' für den unteren Innenabstand 
  * ''padding-left'' für den linken Innenabstand

\\
\\
{{:informatik:html-css:css-box-modell.png?538|}}

</panel>

<panel type="primary" title="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:html-css:css-box-modell.png?538|}}

</panel>

<panel type="primary" title="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:html-css:css-box-modell.png?538|}}

</panel>
<panel type="success" title="Aufgabe #3">
{{url>https://learningapps.org/watch?app=5706584 80%,600px|iFrame not installed}}



</panel>
<panel type="primary" title="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  |   

</panel>
<panel type="success" title="Aufgabe #4">
{{url>https://learningapps.org/watch?app=5706469 80%,600px|iFrame not installed}}


</panel>

<panel type="success" title="Aufgabe #5">
**Wiederholung zu CSS**\\
\\
{{url>https://learningapps.org/watch?v=p6it8umi317 80%,600px|iFrame not installed}}

</panel>

</accordion>