CSS-Box-Sizing

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

Elemente können entweder extrinsisch oder intrinsisch dimensioniert werden. Das CSS-Box-Modell definiert seitenbezogene Eigenschaften, um die Größe eines Elements explizit oder "extrinsisch" festzulegen, einschließlich width, height, padding und margin-Eigenschaften (zusammen mit border-Eigenschaften, die im Modul CSS-Hintergründe und -Rahmen definiert sind). Dieses CSS-Box-Sizing-Modul erweitert das CSS-Box-Modell-Modul, um einem Element zu ermöglichen, intrinsisch dimensioniert zu werden – das Festlegen der Größe eines Elements basierend auf der Größe seines Inhalts.

Die in diesem Modul eingeführten Werte für die Dimensionierung ermöglichen es Elementen mit Größeneinschränkung, explizite intrinsische Größen anzunehmen, als ob die Breite und Höhe ihres fließenden Inhalts der angegebenen expliziten intrinsischen Größe entsprechen würde, anstatt so dimensioniert zu werden, als wären sie leer.

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 Dimensionen eines Elements automatisch anpassen kann, um ein angegebenes Seitenverhältnis beizubehalten, solange eine der Dimensionen automatisch dimensioniert wird.

Das Modul für logische Eigenschaften und Werte erweiterte die im Box-Modell und Box-Sizing-Modul verfügbaren Eigenschaften, um schreibmodusz-relative Entsprechungen der entsprechenden physischen Box-Modell- und intrinsischen Box-Sizing-Eigenschaften zu enthalten.