Das CSS-Box-Modell

Auf die Gefahr hin, mich zu wiederholen: Jedes Element im Webdesign ist eine rechteckige Box. Das war mein Aha-Erlebnis, das mir wirklich geholfen hat, CSS-basiertes Webdesign zu verstehen und die Layouts zu realisieren, die ich realisieren wollte. Wir haben bereits über die Positionierung dieser Boxen und ein wenig und über ihr Verhalten gesprochen.

Worüber wir noch nicht viel gesprochen haben, ist die Box selbst. Wie genau wird die Größe der Box berechnet?
Hier ist eine Grafik

Wenn Sie ein Firebug-Benutzer sind, sind Sie vielleicht an eine Grafik wie diese gewöhnt, die schön die Zahlen zeigt, die eine beliebige Box auf der Seite beeinflussen.

Beachten Sie in beiden Beispielen, dass der Rand im Weißen liegt. Der Rand ist einzigartig darin, dass er nicht die Größe der Box selbst beeinflusst, sondern er beeinflusst andere Inhalte, die mit der Box interagieren, und ist somit ein wichtiger Teil des CSS-Box-Modells.

Die Größe der Box selbst wird wie folgt berechnet:

Breite	Breite + links-Padding + rechts-Padding + links-Rand + rechts-Rand
Höhe	Höhe + oberes-Padding + unteres-Padding + oberer-Rand + unterer-Rand

Was passiert, wenn diese Werte nicht deklariert sind?

Wenn Padding oder Ränder nicht deklariert sind, sind sie entweder null (wahrscheinlich, wenn Sie ein CSS-Reset verwenden) oder der Standardwert des Browsers (wahrscheinlich nicht null, insbesondere bei Formularelementen, die häufig nicht zurückgesetzt werden).

Wenn die Breite einer Box nicht deklariert ist (und die Box ein Block-Level-Element ist), wird es ein wenig seltsamer. Beginnen wir damit und gehen dann zu einigen anderen wichtigen Dingen über das Box-Modell über.

Die Standardbreite von Block-Level-Boxen

Wenn Sie keine Breite festlegen und die Box statisch oder relativ positioniert ist, bleibt die Breite bei 100% und das Padding und der Rand drängen nach innen statt nach außen. Wenn Sie jedoch die Breite der Box explizit auf 100% einstellen, drängt das Padding die Box wie gewohnt nach außen.

Die Lektion hier ist, dass die Standardbreite einer Box nicht wirklich 100% ist, sondern ein weniger greifbares „was übrig bleibt“. Dies ist besonders wertvoll zu wissen, da es viele Umstände gibt, in denen es äußerst nützlich ist, eine Breite entweder festzulegen oder nicht festzulegen.

Der größte Dorn im Auge, den ich immer finde, sind Textarea-Elemente, die ihre Breiten dringend benötigen, um dem erforderlichen „cols“-Attribut entgegenzuwirken und keine Kindelemente haben können. Sie benötigen also oft, dass die Textarea explizit auf 100% eingestellt ist, aber auch ein Padding hat, das sie zu groß werden lässt, um hineinzupassen. In einer Umgebung mit statischer Breite greifen wir oft auf Pixelbreiten zurück, die passen, aber in flüssigen Umgebungen gibt es keine solche Glück.

Absolute Boxen ohne Breite

Absolut positionierte Boxen, bei denen keine Breite festgelegt ist, verhalten sich etwas seltsam. Ihre Breite ist nur so groß, wie sie benötigt wird, um den Inhalt aufzunehmen. Wenn die Box also ein einzelnes Wort enthält, ist die Box nur so breit wie dieses Wort dargestellt wird. Wenn sie zu zwei Wörtern wächst, wächst sie bis zu dieser Breite.

Dies sollte so lange fortgesetzt werden, bis die Box 100% der Breite des Elternteils (des nächstgelegenen relativ positionierten Elternteils oder des Browserfensters) erreicht und dann zu umbrechen beginnt. Es fühlt sich natürlich und normal an, dass sich Boxen vertikal ausdehnen, um Inhalt aufzunehmen, aber es fühlt sich einfach seltsam an, wenn dies horizontal geschieht. Dieses seltsame Gefühl ist gerechtfertigt, da es viele Eigenheiten gibt, wie verschiedene Browser damit umgehen, ganz zu schweigen von der Tatsache, dass Text auf verschiedenen Plattformen unterschiedlich gerendert wird.

Floated Boxen ohne Breite

Das exakt gleiche Verhalten ist bei gefloateten Elementen ohne Breiten zu beobachten. Die Box ist nur so breit wie nötig, um den Inhalt aufzunehmen, bis zur Breite ihres Elternelements (muss nicht relativ positioniert sein). Aufgrund der fragilen Natur dieser breitenlosen Boxen ist die Lektion, die man hier mitnehmen kann, nicht auf sie in geschäftskritischen Szenarien, wie z. B. im gesamten Seitenlayout, zu setzen. Wenn Sie eine Spalte floaten, um sie als Seitenleiste zu verwenden, und sich auf ein Element darin (wie ein Bild) verlassen, um seine Breite zu halten, suchen Sie nach Problemen.

Inline-Elemente sind auch Boxen

Wir haben uns hier eher auf Boxen als Block-Level-Elemente konzentriert. Es ist leicht, sich Block-Level-Elemente als Boxen vorzustellen, aber Inline-Elemente sind ebenfalls Boxen. Stellen Sie sie sich als sehr, sehr lange und schlanke Rechtecke vor, die zufällig jede Zeile umbrechen. Sie können Margin, Padding, Ränder wie jede andere Box haben.

Das Umbrechen macht es verwirrend. Ein linker Rand schiebt die Box nach rechts, wie man es erwarten würde, aber nur die erste Zeile, da dies der Anfang der Box ist. Das Padding wird über und unter dem Text angewendet, wie es sein sollte, und wenn es umbricht, ignoriert es die Zeile über seinem Padding und beginnt dort, wo die Zeilenhöhe es vorschreibt. Der Hintergrund wurde mit Transparenz angewendet, um zu sehen, wie es klarer funktioniert.

Sehen Sie es mit eigenen Augen

Möchten Sie jede einzelne „Box“ sehen, aus der eine Seite besteht? Versuchen Sie, dies vorübergehend in das Stylesheet einzufügen.

* {
   outline: 1px solid red !important;
}