CSS box sizing

Das CSS box sizing-Modul ermöglicht es Ihnen, zu bestimmen, wie Elemente ihren Inhalt aufnehmen oder in einen bestimmten Layoutkontext passen. Es definiert Größen-, Mindest- und Höchstgrößen-Eigenschaften und erweitert die CSS-Größeneigenschaften um Schlüsselwörter, die inhaltsbasierte intrinsische Größen und kontextbasierte extrinsische Größen darstellen.

Elemente können entweder extrinsisch oder intrinsisch dimensioniert sein. 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 (zusammen mit den border-Eigenschaften, die im CSS Backgrounds und Borders-Modul definiert sind). Dieses CSS box sizing-Modul erweitert das CSS-Boxmodell-Modul, um ein Element intrinsisch dimensionieren zu können - die Größe des Elements auf Basis der Größe seines Inhalts festzulegen.

Die in diesem Modul eingeführten Größenwerte erlauben es Elementen mit Größen-Containment, explizite intrinsische Größen anzunehmen, als ob die Breite und Höhe ihres Flussinhalts mit der angegebenen expliziten intrinsischen Größe übereinstimmen würde, anstatt so dimensioniert zu werden, als ob sie leer wären.

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

Das Modul für logische Eigenschaften und Werte hat die im Boxmodell und den Box-sizing-Modulen verfügbaren Eigenschaften erweitert, um schreibmodus-relative Äquivalente der entsprechenden physikalischen Boxmodell- und intrinsischen Boxgrößeneigenschaften einzuschließen.