Heim > Artikel > Web-Frontend > CSS-Box-Modell
Das sogenannte Box-Modell behandelt das HTML-Element als Box. Im täglichen Leben sind Kisten die häufigsten Gegenstände. Beispielsweise besteht eine Schachtel mit Mondkuchen aus einer Außenverpackung, einer gewöhnlichen Eisenschachtel im Inneren und einer Plastik- oder Papierverpackung. In einer großen Schachtel befinden sich mehrere kleine Verpackungen. Auf die gleiche Weise wird jedes Tag in HTML als geformtes Feld betrachtet, und die Beziehung zwischen den Tags kann als Box-zu-Box-Beziehung betrachtet werden.
Das Boxmodell besteht aus: Inhalt: was das Element präsentieren möchte
Innenabstand: der Abstand zwischen Inhalt und Rand
Grenze (Grenze)
Marge: der Abstand zwischen den Feldern
Die Breiten- und Höhenattribute sind die Breiten- und Höhenattribute des Inhalts (Inhalt), nicht die Breite und Höhe des Elements.
Die Breite des Elements = linker Rand, linker Rand, linke Polsterbreite, rechte Polsterung, rechter Rand, rechter Rand
Höhe des Elements = oberer Rand, oberer Rand, obere Polsterhöhe, untere Polsterung, unterer Rand, unterer Rand
Aus der obigen Formel lässt sich ableiten, dass die Eigenschaften jeder Kante separat (im Uhrzeigersinn) eingestellt werden können.
Zum Beispiel: padding:10px; (entspricht der Einstellung padding:10px 10px 10px 10px;)
padding:10px 20px; (entspricht: padding:10px 20px 10px 20px;)
padding:10px 15px 20px; (entspricht: padding:10px 15px 20px 15px;)
Das Gleiche gilt auch für andere Ränder und Umrandungen.