Die CSS-Box-Modell
Alle HTML-Elemente können als Felder betrachtet werden. In CSS wird der Begriff "Box-Modell" verwendet, wenn es um Design und Layout zu reden.
Die CSS-Box-Modell ist im Wesentlichen eine Box, die sich um jedes HTML-Element umschließt. Es besteht aus: Ränder, Rahmen Polsterung und den eigentlichen Inhalt.
Das Bild unten zeigt das Box-Modell:
Erklärung der verschiedenen Teile:
- Inhalt - Der Inhalt der Box, wo Text und Bilder erscheinen
- Padding - Löscht einen Bereich um den Inhalt.Die Polsterung ist transparent
- Border - Eine Grenze , die um die Polsterung und Inhalt geht
- Margin - Löscht einen Bereich außerhalb der Grenze.Die Marge ist transparent
Das Box-Modell ermöglicht es uns, einen Rahmen um Elemente hinzuzufügen und Raum zwischen den Elementen zu definieren.
Beispiel
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
} Versuch es selber " Breite und Höhe eines Elements
Um die Breite und Höhe eines Elements richtig in allen Browsern zu setzen, müssen Sie wissen, wie die Box-Modell funktioniert.
 | Wichtig: Wenn Sie die Breite und Höhe Eigenschaften eines Elements mit CSS gesetzt wird , ist nur die Breite und Höhe des Inhaltsbereichs.Um die volle Größe eines Elements zu berechnen, müssen Sie auch Polsterung, Ränder und Rahmen hinzufügen. |
|---|
Angenommen , wir wollen , um Stil <div> Element eine Gesamtbreite von 350px haben:
Beispiel
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
} Versuch es selber " Hier ist die Mathematik:
Die Gesamtbreite eines Elements sollte wie folgt berechnet:
Gesamtelementbreite = Breite + Padding links + rechts padding + linken Rand + rechten Rand + linken Rand + rechten Rand
Die Gesamthöhe eines Elements sollte wie folgt berechnet:
Gesamtelementhöhe = Höhe + top padding + unten padding + oberen Rand + untere Grenze + oberen Rand + unteren Rand
| Hinweis für alte IE: Internet Explorer 8 und früheren Versionen umfassen Polsterung und Rahmen in der width Eigenschaft. Um dieses Problem zu beheben, fügen Sie ein <!DOCTYPE html> zur HTML - Seite. |
|---|
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»