Wie werden die min-contentund max-contentWerte in CSS berechnet?
Und was bedeutet intrinsische Dimension?
80
Hinweis: "Breite" in diesem Text bezieht sich auf die "logische Breite", nicht auf CSS width. Das heißt, die Werte gelten auch für CSSs height, wenn die Sprachrichtung vertikal ist (wie bei ostasiatischen Sprachen) oder in Flexbox oder Grid. min-contentund max-contentsind gültige Werte für width, height, min-width, min-height, max-width, max-heightund noch mehr Eigenschaften (wie flex-basis).
CSS-Dimensionierungsstufe 3 führte das Konzept der intrinsischen Dimensionen ein - das Gegenteil von extrinsisch . Eine extrinsische Dimension einer Box wird auf der übergeordneten Box der Box berechnet. Zum Beispiel width: 80%wird eine extrinsische Dimension gesagt, da die widthdes Subjekts von widthder seiner enthaltenden Box abhängt .
Im Gegensatz dazu width: min-contentwird dies als intrinsisch bezeichnet, da die Breite der Box anhand der Abmessung des Inhalts berechnet wird, den die Box selbst enthält.
Eigenabmessungen sind Eigenschaften der Box selbst. Extrinsische Abmessungen sind nur verfügbar, wenn die Box im Dokument und in einem Kontext platziert ist, in dem diese Werte berechnet werden können. Zum Beispiel hat der CSS-Flow (der klassische CSS-Layoutmodus), wie Sie wahrscheinlich wissen, height: 20%nur dann Auswirkungen, wenn er heightim übergeordneten Element definiert ist (dh vererbbar ist). Dies ist ein Fall einer extrinsischen Dimension, die nicht berechenbar ist (wenn ein extrinsischer Wert nicht verfügbar ist, fällt CSS auf sein intrinsisches Äquivalent zurück). Stattdessen height: min-contentist immer berechenbar, wie es ist intrinsische an der Box selbst, und es ist immer die gleiche , unabhängig von der Platzierung der Box (oder die Abwesenheit des Box) im Dokument.
Die Definition von min-contentund max-contenthat sich im Laufe der Jahre viele Male geändert, aber das Ergebnis ist immer gleich geblieben, und es ist ziemlich einfach zu verstehen. Sie wurden ursprünglich von der Community als Schlüsselwörter für angefordert width, deren berechneter Wert mit der Breite einer Box übereinstimmen würde, wenn die Box in Betrieb ist float. Und tatsächlich basierte die Definition dieser beiden Eigenschaften ursprünglich auf dem Verhalten von float; Jetzt sind sie allgemeiner wie folgt definiert:
min-contenthttps://www.w3.org/TR/css-sizing-3/#min-content
Die kleinste Größe, die eine Box annehmen kann, führt nicht zu einem Überlauf, der durch Auswahl einer größeren Größe vermieden werden könnte.
Mit anderen Worten, die kleinste Breite einer Box, bei der der Inhalt der Box die Box selbst nicht überläuft .
Eine gute Möglichkeit, dies zu visualisieren, ist die Verwendung von float.
/* the computed width of #red in this example
equals to specifying #red { width: min-content } */
#blue { width: 0px; }
#blue > #red { float: left; }
(GIF-Quelle: http://jsfiddle.net/6srop4zu/ )
In der oben GIF, das rote Feld min-Gehalt Breite entspricht die Breite der roten Feldes zum Zeitpunkt der Breite des blauen Box ist 0px (234px im GIF, könnte in der jsfiddle unterschiedlich sein).
Wie Sie sehen können, würde das Wort supercalifragilisticexpialidociousüber das rote Kästchen laufen , wenn das rote Kästchen kleiner gemacht würde. In diesem Fall min-contententspricht das Wort also der Breite dieses bestimmten Wortes, da es horizontal am meisten Platz beansprucht.
max-contenthttps://www.w3.org/TR/css-sizing-3/#max-content
Die „ideale“ Größe einer Box in einer bestimmten Achse, wenn unendlich viel Platz zur Verfügung steht. Normalerweise ist dies die kleinste Größe, die die Box in dieser Achse annehmen kann, während sie noch um ihren Inhalt passt, dh den nicht ausgefüllten Raum minimiert und gleichzeitig einen Überlauf vermieden.
/* the computed width of #red in this example
equals to specifying #red { width: max-content } */
#blue { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }
(GIF-Quelle: http://jsfiddle.net/nktsrzvg/ )
In der obigen GIF, das rote Feld Max-Inhalt Breite der roten Box Breite entspricht , wenn die Breite der blauen Box unendlich ist (386px im GIF, könnte in der jsfiddle unterschiedlich sein).
Hier nutzt die rote Box den verfügbaren Platz auf der x-Achse in der blauen Box voll aus, ohne ihn jedoch zu verschwenden. Der Inhalt darf ohne Einschränkungen auf der entsprechenden Achse erweitert werden, und das rote Kästchen umschließt ihn und am Punkt der maximalen Erweiterung.
Was fit-contentist mit stretchund anderen? Diese Immobilien werden derzeit überarbeitet und sind daher nicht stabil (Datum: Juli 2018). Sie werden hier hinzugefügt, wenn sie etwas reifer werden (hoffentlich bald).
auto? Gibt es einen grundlegenden Unterschied in der Designtheorie zwischen ihnen?autoist auch intrinsisch, nur durch seinen Inhalt bestimmt?Ich fand @Wes Antwort sehr klar und gründlich. Aber für alle, die eine kurze suchen:
Min-Inhalt:
Die Mindestbreite, die ein Inhalt (eine Gruppe von Wörtern) haben kann. Dies bedeutet die Breite des größten Wortes im Inhalt.
Beispiel:
hi this is biggest-word-in-the-content <------- min-content ------>max-content:
Die maximale Breite, die ein Inhalt (eine Gruppe von Wörtern) haben kann. Dies bedeutet die Breite des Inhalts, wenn alle Wörter in einer Zeile angeordnet sind.
Beispiel:
hi this is a content without considering any line breaks. <---------------------- max-content ------------------->quelle