CSS box sizing

Das CSS box sizing Modul ermöglicht es Entwicklern, festzulegen, wie Elemente ihren Inhalt einpassen 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 inhaltsbasierte intrinsische Größe und kontextbasierte extrinsische Größe darstellen.

Elemente können entweder extrinsisch oder intrinsisch dimensioniert werden. Das CSS box model definiert seitenbezogene Eigenschaften, um die Größe eines Elements explizit oder "extrinsisch" festzulegen, einschließlich der Eigenschaften width, height, padding und margin (zusammen mit den in dem Modul CSS backgrounds and borders definierten border-Eigenschaften). Dieses CSS box sizing Modul erweitert das CSS box model Modul, um zu ermöglichen, dass ein Element intrinsisch dimensioniert wird – die Größe des Elements basierend auf der Größe seines Inhalts festzulegen.

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

Dieses Modul führte auch die Möglichkeit ein, ein Seitenverhältnis für das Kästchen 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 Dimensionen automatisch dimensioniert wird.

Das logical properties and values module erweiterte die im Boxmodell und den Box Sizing Modulen verfügbaren Eigenschaften um schreibmodus-relative Äquivalente der entsprechenden physischen Boxmodell- und intrinsischen Box Sizing-Eigenschaften.