CSS 适合内容和最大内容之间的区别是什么？

我正在跟踪 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可以用 margin: x auto;来居中一个未知宽度的 div

但是如果你在这个例子中将 fit-content改为 max-content，那么无论如何这都是有效的，它们似乎总是以相同的方式运行。

有人知道这两条规则的区别吗? 在什么情况下我应该使用其中一条？

114081 次浏览
小开

正如你在 https://developer.mozilla.org/en-US/docs/Web/CSS/width中看到的那样，max-width 只是根据子元素需要的空间设置大小，而不管它是否可用，而 fit-width 使用 max-width 检查子元素需要的空间是否可用，如果不可用，则使用 min-width。 有关最大宽度和最小宽度之间的区别，请参阅 http://dev.w3.org/csswg/css-sizing/#block-intrinsic。

小开
最佳答案

拟合内容使用 max-content ，除非 available < max-content，然后使用 有空. 除非 available < min-content，然后使用 最低含量。

小开

在一个场景中，max-content 和 fit-content 的行为方式不一样，那就是在元素上设置一个“ max-width”财产，并且 viewport 的大小比 max-width 的值窄。在这种情况下，“ max-content”值将导致布局，其中文本将被任意剪切(查看整个文本的唯一方法是水平滚动)。另一方面，使用“ fit-content”值将忽略 max-width 属性，并在 viewport 中很好地调整文本。

小开

简而言之，width: fit-content;的意思是:

利用空间，你可以(可用) ，但不少于你的 min-content，不多于你的 max-content

小开

看来这两个密码是一样的:

.fit-content {
width: fit-content;
}
// is same as
.fit-content {
width: max-content;
max-width: 100%;
min-width: min-content;
}

根据我的经验，我要么选择 width: fit-content要么选择 width: max-content; max-width: 100%。后者适用于元素不应该有最小宽度的情况。


提交答案