CSS box sizing

Das CSS box sizing Modul ermöglicht es Entwicklern, festzulegen, wie Elemente ihren Inhalt anpassen oder in einen bestimmten Layout-Kontext passen. Es definiert Größen-, Mindestgrößen- und Maximalgrößen-Eigenschaften und erweitert außerdem die CSS-Größeneigenschaften durch Schlüsselwörter, die größenbasierte intrinsic size und kontextbasierte extrinsic Größe repräsentieren.

Elemente können entweder extrinsisch oder intrinsisch skaliert werden. Das CSS-Boxmodell definiert seitenrelative 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 Hintergründe und Grenzen Modul definiert sind). Dieses CSS box sizing Modul erweitert das CSS-Boxmodell-Modul, um einem Element zu ermöglichen, intrinsisch skaliert zu werden – die Größe des Elements auf Basis 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 in den Fluss eingebetteten Inhalts der angegebenen expliziten intrinsischen Größe entspricht, anstatt so skaliert zu werden, als ob sie leer wären.

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

Das modul für logische Eigenschaften und Werte erweiterte die im Boxmodell und im box sizing Modul verfügbaren Eigenschaften um schreibmodus-relative Äquivalente der entsprechenden physischen Boxmodells- und intrinsischen Boxgrößeneigenschaften.

Referenz

Eigenschaften

Hinweis: Das CSS box sizing Modul führt die min-intrinsic-sizing Eigenschaft ein, die noch nicht implementiert wurde.

Datentypen und Werte

Hinweis: Das CSS box sizing Modul führt die Schlüsselwörter stretch und contain als Größenwerte ein, die noch nicht in den box sizing Eigenschaften implementiert wurden.

Funktionen

Glossarbegriffe

Leitfäden

Verstehen von Seitenverhältnissen

Erfahren Sie mehr über die aspect-ratio Eigenschaft, diskutieren Sie Seitenverhältnisse für ersetzte und nicht ersetzte Elemente und untersuchen Sie einige häufige Anwendungsfälle für Seitenverhältnisse.

Einführung in das CSS-Boxmodell

Erklärt eines der grundlegenden Konzepte von CSS: das Boxmodell. Dieses Modell definiert, wie CSS Elemente anordnet, einschließlich ihres Inhalts-, Padding-, Rahmen- und Randbereichs.

Beherrschen des Randkollapses

Manchmal werden zwei angrenzende Ränder zu einem einzigen zusammengefaltet. Dieser Artikel beschreibt die Regeln, die bestimmen, wann und warum dies geschieht und wie es kontrolliert werden kann.

Visuelles Formatierungsmodell

Erklärt das visuelle Formatierungsmodell.

Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse

Erklärt intrinsische Größenanpassungen als Vorstufe zum Verständnis der Kontrolle von Größe und Flexibilität von Flex-Elementen entlang der Hauptachse mit flex-grow, flex-shrink und flex-basis.

Verwandte Konzepte

Spezifikationen

Specification
CSS Box Sizing Module Level 4
CSS Box Sizing Module Level 3

Siehe auch