Wie bestimmen CSS „Min-Content' und „Max-Content' die Elementabmessungen?

Erkunden der Funktionalität von „Min-Content“ und „Max-Content“ in CSS

Intrinsische Dimensionen in CSS verstehen

In CSS ist die Die Unterscheidung zwischen intrinsischen und extrinsischen Dimensionen ist von entscheidender Bedeutung. Intrinsische Dimensionen wie „Mindestinhalt“ und „Maximaler Inhalt“ sind Eigenschaften, die einem Element selbst innewohnen. Andererseits werden extrinsische Abmessungen wie „Breite: 80 %;“ basierend auf den Abmessungen des übergeordneten Elements berechnet.

Definition von „min-content“

Gemäß CSS-Größenstufe 3 „min-content“ stellt die kleinstmögliche Breite oder Höhe eines Elements dar, die ein Überlaufen seines Inhalts verhindert. Es passt sich dynamisch an die Breite des längsten Text- oder Inhaltsstücks innerhalb des Elements an.

„Max-Inhalt“ verstehen

Im Gegensatz dazu gibt „Max-Inhalt“ die ideale Größe eines Elements an in einer bestimmten Achse mit unbegrenzt verfügbarem Platz. Es stellt die kleinste Breite oder Höhe dar, die den Inhalt des Elements vollständig ohne ungenutzten Raum umfasst.

Visualisierung mit schwebenden Elementen

Betrachten Sie das folgende Codebeispiel, das das Konzept von „Mindestinhalt“ demonstriert. :

#blue {
  width: 0px;
}
#blue > #red {
  float: left;
}

Wenn sich in diesem Szenario die Breite des #blue-Elements 0 Pixel nähert, verringert sich die Breite des #red-Elements entsprechend, bis der Textinhalt in #red überläuft. Zu diesem Zeitpunkt entspricht die Breite des „Mindestinhalts“ der Breite von #red.

Demonstration mit unendlichem Raum

Zur Veranschaulichung von „Maximaler Inhalt“ weist das folgende Beispiel eine extrem große Breite zu zu #blau:

#blue {
  width: 99999999999999999px;
}
#blue > #red {
  float: left;
}

Da in diesem Fall die Breite von #blau im Wesentlichen unendlich wird, erweitert sich die Breite von #rot, um den Inhalt ohne ungenutzten Platz aufzunehmen. Diese Breite wird als „max-content“-Breite bezeichnet.

Laufende Verfeinerungen für verwandte Eigenschaften

Andere verwandte Eigenschaften wie „fit-content“ und „stretch“ befinden sich derzeit in der Entwicklung und können ihre Funktionalität in Zukunft ändern. Sobald sich ihre Definitionen stabilisieren, werden sie in diese Erklärung einbezogen.

Das obige ist der detaillierte Inhalt vonWie bestimmen CSS „Min-Content' und „Max-Content' die Elementabmessungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!