Question

我正在关注这篇文章https://css-tricks.com/almanac/properties/w/width/，试图了解这条规则是如何运作的。

我有这个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

Answer 1

fit-content使用max-content ，除非 available < max-content，然后使用可用。除非 available < min-content，否则它使用 min-content 。

Answer 2

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

Answer 3

最大内容和适合内容的行为方式不同的一种情况是，当您设置最大宽度＆＃39;元素上的属性，视口大小比max-width值窄。在这种情况下，＆＃39; max-content＆＃39; value将导致文本将被任意剪切的布局（并且查看整个文本的唯一方法是水平滚动）。使用＆＃39; fit-content＆＃39;另一方面，value将忽略max-width属性并在视口内很好地调整文本。

Answer 4

width: fit-content;的意思是：

“使用您可以（可用）但不小于min-content且不大于max-content的空间”

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

4 个答案: