Quelle est la différence entre le CSS fit-contenu et max-contenu?

Je suis la suite de cet article https://css-tricks.com/almanac/properties/w/width/ pour tenter de comprendre comment ce travail de règles.

J'ai cet exemple:

CSS:

*{margin:0; padding:0}
.box{
  background: lightgreen;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

HTML:

<div class="box">
  <img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" />
  <figure>Yes, put some text here that is wider than the image above to try some new rules</figure>
</div>

L'article dit que fit-contenu peut être utilisé pour centrer une div de l'inconnu largeur avec margin: x auto;

Mais si vous changez d'ajustement de contenu pour max-contenu dans cet exemple, c'est de travailler de toute façon et ils semblent se comporter toujours de la même façon.

Personne ne sait quelle est la différence entre ces deux règles et dans quels cas dois-je utiliser l'un ou l'autre?

  • Je ne sais pas non plus de ceux qui, après 19 années de développement frontend. Merci pour les sensibiliser!
  • Ce n'est pas très bien pris en charge et pourtant, bien que caniuse.com/#feat=intrinsic-width
InformationsquelleAutor Vandervals | 2015-06-08
  1. 5

    Comme vous pouvez le voir ici https://developer.mozilla.org/en-US/docs/Web/CSS/width le max-width définit simplement la taille en fonction de l'espace dont ses enfants ont besoin, peu importe si elle est disponible ou pas, tandis que l'ajustement de la largeur vérifie si l'espace des enfants a besoin de l'aide de max-width est disponible et si pas, il utilise le le min-largeur de la place.
    Pour en savoir plus à propos de la différence entre max-width et min-width voir http://dev.w3.org/csswg/css-sizing/#block-intrinsic.

    • Cette partie n'est pas généralement vrai "sinon, il utilise le le min-width à la place". @jiggunjer la réponse ci-dessous donne la nuance
    InformationsquelleAutor Szabolcs Páll
  2. 17

    fit-contenu utilise max-contenu, sauf available < max-content, puis il utilise disponible. Sauf available < min-content, puis il utilise min-contenu.

    InformationsquelleAutor jiggunjer
  3. 1

    l'un scénario dans lequel max-contenu et le contenu ne se comportent pas de la même manière lorsque vous définissez un 'max-width' propriété sur l'élément, et la taille de la fenêtre est plus étroit que le max-width valeur. dans ce cas, le 'max-contenu' est la valeur de un modèle dans lequel le texte sera coupé arbitrairement (et la seule façon de voir l'ensemble du texte est de faire défiler horizontalement). à l'aide de la " fit-contenu de valeur, d'autre part, ignore le max-width de propriété et d'ajuster le texte joliment l'intérieur de la fenêtre d'affichage.

    InformationsquelleAutor shayuna