CSS fit-content和max-content有什么区别？

我正在按照这篇文章 https://css-tricks.com/almanac/properties/w/width/来试图理解这个规则是如何工作的.

我有这个例子：

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

<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>

文章说,fit-content可用于将未知宽度的div居中与margin：x auto;

但是如果你在这个例子中更改了max-content的fit-content,那么无论如何这都是有效的,并且它们似乎总是以相同的方式运行.

有谁知道这两条规则之间有什么区别,我应该在哪些情况下使用其中一条规则？

解决方法

正如你在这里看到的那样 https://developer.mozilla.org/en-US/docs/Web/CSS/width最大宽度只是根据孩子们需要的空间来设置尺寸,无论它是否可用,而适合宽度检查孩子们使用最大宽度所需的空间是否可用,如果没有,它使用最小宽度代替.
有关最大宽度和最小宽度之间差异的进一步阅读,请参阅 http://dev.w3.org/csswg/css-sizing/#block-intrinsic.

原文地址：https://www.jb51.cc/css/215054.html