CSS-Box-Sizing

Das CSS-Box-Sizing-Modul ermöglicht es, festzulegen, wie Elemente ihren Inhalt aufnehmen oder in einen bestimmten Layout-Kontext passen. Es definiert Größen-, Mindestgrößen- und Maximalgrößen-Eigenschaften und erweitert die CSS-Größeneigenschaften mit Schlüsselwörtern, die eine inhaltsbasierte intrinsische Größe und eine kontextbasierte extrinsische Größe darstellen.

Elemente können entweder extrinsisch oder intrinsisch dimensioniert werden. Das CSS-Boxmodell definiert seitenbezogene Eigenschaften, um die Größe eines Elements explizit oder "extrinsisch" festzulegen, einschließlich der Eigenschaften width, height, padding und margin (neben den in dem Modul CSS-Hintergründe und -Ränder definierten border-Eigenschaften). Dieses CSS-Box-Sizing-Modul erweitert das CSS-Boxmodell-Modul, um es einem Element zu ermöglichen, intrinsisch dimensioniert zu werden — die Größe eines Elements basierend auf der Größe seines Inhalts festzulegen.

Die in diesem Modul eingeführten Größenwerte ermöglichen es Elementen mit Größeneindämmung, explizite intrinsische Größen anzunehmen, so als ob die Breite und Höhe ihres Inhaltsflusses der angegebenen expliziten intrinsischen Größe entsprechen würden, anstatt dimensioniert zu werden, als ob sie leer wären.

Dieses Modul führte auch die Möglichkeit ein, ein Seitenverhältnis für die Box eines Elements zu definieren, was bedeutet, dass der Browser die Abmessungen eines Elements automatisch anpassen kann, um ein angegebenes Seitenverhältnis beizubehalten, solange eine der Abmessungen automatisch dimensioniert wird.

Das Modul Logische Eigenschaften und Werte erweiterte die im Boxmodell und den Box-Sizing-Modulen verfügbaren Eigenschaften um schreibmodus-relative Entsprechungen der entsprechenden physischen Boxmodell- und intrinsischen Box-Sizing-Eigenschaften.