CSS box sizing

Das CSS box sizing Modul ermöglicht es Ihnen, anzugeben, wie Elemente in ihren Inhalt oder in einen bestimmten 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 sein. Das CSS Boxmodell definiert seitenrelative 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 CSS backgrounds and borders Modul definiert sind). Dieses CSS box sizing Modul erweitert das CSS Boxmodell Modul, um ein Element intrinsisch zu dimensionieren – 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 Size Containment, explizite intrinsische Größen anzunehmen, als ob die Breite und Höhe ihres inflow-Inhalts der angegebenen expliziten intrinsischen Größe entsprechen würden, 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 Abmessungen eines Elements automatisch anpassen kann, um ein angegebenes Seitenverhältnis beizubehalten, solange eine der Dimensionen automatisch dimensioniert wird.

Das logische Eigenschaften und Werte Modul erweiterte die im Boxmodell und in den Box-Sizing-Modulen verfügbaren Eigenschaften, um schreibmodusrelative Äquivalente der entsprechenden physischen Boxmodell- und intrinsischen Box-Sizing-Eigenschaften einzuschließen.