I'm following this article https://css-tricks.com/almanac/properties/w/width/ to try to understand how this rules work.
我正在跟踪这篇文章，试图理解这些规则是如何工作的。
I have this example:
我有这个例子:
*{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>The article says that fit-content can be used to center a div of unknown width with margin: x auto;
文章说，fit-content可以用来居中一个宽度未知的div，中间有空格:x auto;
But if you change fit-content for max-content in this example, this is working anyway and they seem to behave always in the same way.
但是如果你在这个例子中改变max-content的fit-content，它不管怎样都能工作，而且它们的行为似乎总是一样的。
Does anyone know what is the difference between this two rules and in which cases should I use one or the other?
有人知道这两条规则有什么不同吗?在哪些情况下我应该使用其中一条或另一条规则?
3 个解决方案
#1
3
As you can see it here https://developer.mozilla.org/en-US/docs/Web/CSS/width the max-width simply sets the size based on the space its children needs regardless if it's available or not, while the fit-width checks if the space the children needs using max-width is available and if not, it uses the the min-width instead. For further reading about the difference between max-width and min-width see http://dev.w3.org/csswg/css-sizing/#block-intrinsic.
您可以在这里看到https://developer.mozilla.org/en-US/docs/Web/CSS/width, max-width仅仅根据子元素是否可用的空间来设置大小，而fit-width则检查子元素使用max-width需要的空间是否可用，如果没有，则使用最小宽度。要进一步了解max-width和min-width之间的区别，请参阅http://dev.w3.org/csswg/css-sizing/#block-intrinsic。
#2
3
fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.
fit-content使用max-content，除非可用的< max-content，否则它使用available。除非可用的< min-content，否则它使用min-content。
#3
0
the one scenario in which max-content and fit-content don't behave the same way is when you set a 'max-width' property on the element, and the viewport size is narrower than the max-width value. in this case the 'max-content' value will result in a layout in which the text will be cut arbitrarily (and the only way to see the entire text is to scroll horizontally). using the 'fit-content' value, on the other hand, will ignore the max-width property and adjust the text nicely inside the viewport.
在max-content和fit-content不具有相同行为的一种情况是，在元素上设置“max-width”属性，并且viewport大小比max-width值更窄。在这种情况下，“max-content”值将导致一个布局，其中文本将被任意剪切(查看整个文本的唯一方式是水平滚动)。另一方面，使用“fit-content”值将忽略max-width属性，并在viewport中很好地调整文本。
#1
3
As you can see it here https://developer.mozilla.org/en-US/docs/Web/CSS/width the max-width simply sets the size based on the space its children needs regardless if it's available or not, while the fit-width checks if the space the children needs using max-width is available and if not, it uses the the min-width instead. For further reading about the difference between max-width and min-width see http://dev.w3.org/csswg/css-sizing/#block-intrinsic.
您可以在这里看到https://developer.mozilla.org/en-US/docs/Web/CSS/width, max-width仅仅根据子元素是否可用的空间来设置大小，而fit-width则检查子元素使用max-width需要的空间是否可用，如果没有，则使用最小宽度。要进一步了解max-width和min-width之间的区别，请参阅http://dev.w3.org/csswg/css-sizing/#block-intrinsic。
#2
3
fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.
fit-content使用max-content，除非可用的< max-content，否则它使用available。除非可用的< min-content，否则它使用min-content。
#3
0
the one scenario in which max-content and fit-content don't behave the same way is when you set a 'max-width' property on the element, and the viewport size is narrower than the max-width value. in this case the 'max-content' value will result in a layout in which the text will be cut arbitrarily (and the only way to see the entire text is to scroll horizontally). using the 'fit-content' value, on the other hand, will ignore the max-width property and adjust the text nicely inside the viewport.
在max-content和fit-content不具有相同行为的一种情况是，在元素上设置“max-width”属性，并且viewport大小比max-width值更窄。在这种情况下，“max-content”值将导致一个布局，其中文本将被任意剪切(查看整个文本的唯一方式是水平滚动)。另一方面，使用“fit-content”值将忽略max-width属性，并在viewport中很好地调整文本。