Que sont « min-content » et « max-content » dans le dimensionnement intrinsèque CSS ?

Dimensionnement intrinsèque : Comprendre le contenu minimum et le contenu maximum

Le niveau de dimensionnement CSS 3 introduit le concept de dimensions intrinsèques, qui sont calculées en fonction du contenu d'une boîte. plutôt que son parent. min-content et max-content sont des propriétés intrinsèques qui déterminent respectivement les dimensions minimales et maximales d'une boîte.

Dimensions intrinsèques et dimensions extrinsèques

Une dimension extrinsèque d'une boîte est dérivée de les dimensions de sa boîte parent, telles que la largeur : 80 %. En revanche, les dimensions intrinsèques, telles que width: min-content, sont déterminées par le contenu de la boîte elle-même.

Définir min-content et max-content

min-content :

• La plus petite largeur possible d'une boîte qui évite le débordement de contenu.
• Si le le contenu de la boîte était plus étroit, un débordement se produirait.

max-content :

• La largeur "idéale" d'une boîte avec un espace disponible illimité.
• La boîte s'agrandit pour accueillir entièrement son contenu sans espaces inutiles.

Comment sont min-content et max-content calculé ?

Pour visualiser le contenu min, considérons une boîte flottante (par exemple, #red) à l'intérieur d'une boîte contenant plus large (par exemple, #blue) :

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

Le min -la largeur du contenu de #red est égale à sa largeur lorsque la largeur de #blue est de 0 px, garantissant que le contenu de #red ne déborde pas.

De même, pour le contenu maximum, visualisez #red flottant dans un #blue très large :

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

La largeur maximale du contenu de #red est égale à sa largeur lorsque la largeur de #blue est effectivement infinie, permettant au contenu de #red de s'étendre pleinement.

Propriétés intrinsèques supplémentaires

D'autres propriétés intrinsèques sont actuellement en cours de développement, notamment l'ajustement et l'étirement. Restez à l'écoute pour les futures mises à jour sur leur définition finale et leur mise en œuvre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!