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
aspect-ratio
box-sizing
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
height
max-height
max-width
min-height
min-width
width
Hinweis: Das CSS box sizing Modul führt die min-intrinsic-sizing
Eigenschaft ein, die noch nicht implementiert wurde.
Datentypen und Werte
<ratio>
Datentypmin-content
Wertmax-content
Wertfit-content
Wertfit-content()
Funktion
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
undflex-basis
.
Verwandte Konzepte
- CSS logische Eigenschaften Modul
min-inline-size
block-size
inline-size
max-block-size
max-inline-size
min-block-size
min-inline-size
margin-block
margin-inline
padding-block
padding-inline
border-block
border-inline
contain-intrinsic-block-size
contain-intrinsic-inline-size
overflow-block
overflow-inline
overscroll-behavior-block
overscroll-behavior-inline
- CSS Boxmodell Modul
- CSS Hintergründe und Grenzen Modul
border
Kurzformborder-width
Kurzformborder-bottom-width
border-left-width
border-right-width
border-top-width
- CSS Überlauf Modul
- CSS Rasterlayout Modul
- CSS flexibles Boxlayout Modul
Spezifikationen
Specification |
---|
CSS Box Sizing Module Level 4 |
CSS Box Sizing Module Level 3 |
Siehe auch
- CSS Anzeige Modul
- CSS Flexlayout Modul
- CSS Rasterlayout Modul
- CSS positioniertes Layout Modul
- CSS Fragmentierung Modul