css - 在 CSS 中， "width: fit-content;"和 "width: "fit-content(some_value); 之间有什么区别？

Question

MDN 网络文档将 fit-content 描述为一个函数:

https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

https://developer.mozilla.org/en-US/docs/Web/CSS/width#fit-content

width: fit-content(20em);

我找不到任何对 fit-content 被定义为不带括号的值的引用，如下所示:

figure {
  width: fit-content;
}

有什么区别？

Answer 1

需要引用the specification找到他们:

Value: auto | | min-content | max-content | fit-content(<length-percentage>)

这是 Box Sizing Level 3 规范。

稍后在 the Level 4你可以阅读:

New values: stretch | fit-content | contain

和

fit-content

Essentially fit-content(stretch) i.e. min(max-content, max(min-content, stretch)).

所以 fit-content = fit-content(stretch)

stretch

Applies stretch-fit sizing, attempting to match the size of the box’s margin box to the size of its containing block. See § 7.1 Stretch-fit Sizing: filling the containing block.