Was sind „Min-Content' und „Max-Content' bei der intrinsischen CSS-Größenbestimmung?

Intrinsische Dimensionierung: Min-Content und Max-Content verstehen

CSS-Sizing Level 3 führt das Konzept der intrinsischen Dimensionen ein, die auf der Grundlage des Inhalts innerhalb einer Box berechnet werden und nicht sein übergeordnetes Element. min-content und max-content sind intrinsische Eigenschaften, die die minimalen bzw. maximalen Abmessungen einer Box bestimmen.

Intrinsische Abmessungen vs. extrinsische Abmessungen

Eine extrinsische Dimension einer Box wird abgeleitet von Die Abmessungen der übergeordneten Box, z. B. Breite: 80 %. Im Gegensatz dazu werden intrinsische Abmessungen wie Breite: Mindestinhalt durch den Inhalt innerhalb der Box selbst bestimmt.

Mindestinhalt und Höchstinhalt definieren

Mindestinhalt :

• Die kleinstmögliche Breite einer Box, die ein Überlaufen von Inhalten verhindert.
• Wenn die Box Wäre der Inhalt schmaler, würde es zu einem Überlauf kommen.

max-content:

• Die „ideale“ Breite einer Box mit unbegrenzt verfügbarem Platz.
• Die Box wird erweitert, um ihren Inhalt ohne unnötigen Leerraum vollständig unterzubringen.

Wie werden Min-Content und Maximaler Inhalt berechnet?

Um den minimalen Inhalt zu visualisieren, betrachten Sie eine schwebende Box (z. B. #rot) innerhalb einer breiteren enthaltenden Box (z. B. #blau):

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

Die min - Die Inhaltsbreite von #red entspricht der Breite, wenn die Breite von #blue 0 Pixel beträgt, wodurch sichergestellt wird, dass der Inhalt von #red nicht überläuft.

Ähnlich gilt: Stellen Sie sich für maximalen Inhalt vor, dass #rot in einem sehr breiten #blau schwebt:

#blue { width: 99999999999999999px; } /* ~infinite */

Die maximale Inhaltsbreite von #rot entspricht der Breite, wenn die Breite von #blau praktisch unendlich ist, sodass sich der Inhalt von #rot erweitern kann vollständig.

Zusätzliche intrinsische Eigenschaften

Andere intrinsische Eigenschaften werden derzeit entwickelt, darunter Passform und Dehnbarkeit. Seien Sie gespannt auf zukünftige Updates zu ihrer endgültigen Definition und Implementierung.

Das obige ist der detaillierte Inhalt vonWas sind „Min-Content' und „Max-Content' bei der intrinsischen CSS-Größenbestimmung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!