Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- e1:css_boxen [2017/07/03 13:04] – admin03
+++ e1:css_boxen [2017/07/14 19:56] (aktuell) – admin03
@@ Zeile 9: / Zeile 9: @@
 angegeben:
-[[http://185.75.148.125:4444/beispiele/e1/divbox.html|Ausführbares Beispiel]]
+[[http://185.75.148.125:4444/infowiki/beispiele/e1/divbox.html|Ausführbares Beispiel]]
@@ Zeile 106: / Zeile 106: @@
 <table>
 <tr><th>HTML</th><th>CSS</th><th>Erläuterung</th></tr>
-<tr><td><Elementname class = “Wert “></td><td>.Wert { CSS-Angaben }</td><td>.Wert { CSS-Angaben }</td></tr>
+<tr><td>&lt;Elementname class = “Wert “&gt;</td><td>.Wert { CSS-Angaben }</td><td>Das class-Attribut wird in der
-<tr><td><Elementname id = “Wert “></td><td>#Wert { CSS-Angaben }</td><td>#Wert { CSS-Angaben }</td></tr>
+CSS-Datei mit dem Punkt angesprochen.</td></tr>
+<tr><td>&lt;Elementname id = “Wert “&gt;</td><td>#Wert { CSS-Angaben }</td><td>Das id-Attribut wird in der CSSDatei
+mit dem # angesprochen.</td></tr>
  </table>
 </html>
+====== Rahmen und Abstände ======
+{{ :e1:600px-box-modell.svg.png?direct&600 |}}
+Im visuellen Anzeigemodell wie Windows Fenster oder Android Activitys erfolgt die Darstellung von Elementen durch das Zeichnen von Rechtecken. Die Bestandteile dieser Rechtecke beschreibt das „Box-Modell“. Eine Box kann bestehen aus:
+Dem Inhaltsbereich, also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,
+  * einem Innenabstand (padding),
+  * einem Rahmen (border) und
+  * einem Außenabstand (margin).
+Bei Blockelementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben.
+Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.
+Wird eine Box positioniert, beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom. Siehe auch [[https://wiki.selfhtml.org/wiki/CSS/Box-Modell|https://wiki.selfhtml.org/wiki/CSS/Box-Modell]]