Wenn wir eine Webseite gestalten, kommt es häufig vor, dass die Breite oder Höhe der endgültigen Webseite unsere Vorkalkulation überschreitet. Dies wird tatsächlich durch das sogenannte CSS-Box-Modell verursacht.
| #test{margin:10px;padding:10px;width:100px;height:100px;} |
Wie im obigen Code berechnen wir oft die Position, die es einnimmt, als Breite: 120 Pixel, Höhe: 120 Pixel, da nach normalem Verständnis die Polsterung der innere Rand ist, der in der Breite enthalten sein sollte, und der Rand der äußere Rand. Abstand, also Breite = Rand links + Rand rechts + Breite, aber die Interpretation des CSS-Box-Modells durch den Browser ist nicht dieselbe, sodass wir am Ende feststellen werden, dass die Breite und Höhe der gestalteten Webseite unsere übersteigt erwartete Berechnungen und schließlich die Fehlausrichtung der Anzeige verursachen.
Tatsächlich ist dies nicht der Fall. Die tatsächliche Berechnung der vom Test eingenommenen Position sollte sein: width=margin-left + margin-right + padding-left + padding-right + width, also die tatsächliche Größe der Breite sein innerer Rand + äußerer Rand. +Die Breite selbst, das heißt, die tatsächliche Größe des Tests sollte 140 Pixel betragen. Die Berechnung der Höhe erfolgt auf die gleiche Weise wie die Berechnung der Breite.
Und wenn dem Test ein Rand hinzugefügt wird, sollte der Breiten- und Höhenalgorithmus auch die Größe des Randes hinzufügen.
| #test{margin:10px;padding:10px;border:5px;width:100px;height:100px;} |
Die Breite des Tests sollte hier der äußere Rand + der innere Rand + der Rand + die Breite selbst sein, sodass die Breite des Tests 150 Pixel beträgt.
Wie in der Abbildung unten gezeigt, ist die tatsächliche Position, die Breite und Höhe einnehmen, nicht der kleine Bereich selbst, sondern sollte bis zur äußersten dunkelblauen Schicht reichen.
