Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung Nächste Überarbeitung | Vorherige Überarbeitung | ||
informatik:css:css-lernpfad-box-modell [2018/10/15 13:52] – jonathan.pfeiffer | informatik: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.\\ | ||
- | {{: | + | \\ |
+ | {{: | ||
<tabbox Begriffe> | <tabbox Begriffe> | ||
Zeile 30: | Zeile 31: | ||
Beachte, dass '' | Beachte, dass '' | ||
+ | \\ | ||
+ | \\ | ||
+ | {{: | ||
<tabbox #2> | <tabbox #2> | ||
Zeile 48: | Zeile 52: | ||
* '' | * '' | ||
* '' | * '' | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | {{: | ||
<tabbox Rahmen> | <tabbox Rahmen> | ||
Zeile 58: | Zeile 66: | ||
* '' | * '' | ||
+ | \\ | ||
+ | \\ | ||
+ | {{: | ||
<tabbox Außenabstand> | <tabbox Außenabstand> | ||
Zeile 67: | Zeile 78: | ||
* '' | * '' | ||
+ | **Der Außenabstand ('' | ||
+ | seinen Nachbarelementen.**\\ | ||
+ | \\ | ||
Der Außenabstand übernimmt die Hintergrundfarbe des umgebenden Elements. | Der Außenabstand übernimmt die Hintergrundfarbe des umgebenden Elements. | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | {{: | ||
+ | |||
+ | <tabbox #3> | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | <tabbox #4> | ||
+ | <WRAP center round todo 80%> | ||
+ | * Öffne das Thimble Projekt. https:// | ||
+ | * 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. | ||
+ | </ | ||
+ | |||
<tabbox Gesamtbreite> | <tabbox Gesamtbreite> | ||
+ | |||
Auf den ersten Blick ungewöhnlich ist die Berechnung der **Gesamtbreite** einer Box. '' | Auf den ersten Blick ungewöhnlich ist die Berechnung der **Gesamtbreite** einer Box. '' | ||
Zeile 82: | Zeile 114: | ||
margin: 10px; | margin: 10px; | ||
} | } | ||
- | < | + | </code> |
\\ | \\ | ||
Die Gesamtbreite der Box setzt sich aus width, padding, border und margin zusammen: | Die Gesamtbreite der Box setzt sich aus width, padding, border und margin zusammen: | ||
Zeile 94: | Zeile 126: | ||
| + margin-left | | + margin-left | ||
| Gesamtbreite der Box | 780px | | | Gesamtbreite der Box | 780px | | ||
- | <tabbox #3> | + | |
+ | <tabbox #5> | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | <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:// | Um die unten angeführte Learningapp bearbeiten zu können, musst du folgenden Link aufrufen: [[https:// | ||
Zeile 103: | Zeile 141: | ||
</ | </ | ||
\\ | \\ | ||
+ | <tabbox #7> | ||
+ | **Wiederholung zu CSS**\\ | ||
+ | \\ | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
<tabbox Links> | <tabbox Links> | ||
* [[https:// | * [[https:// |