注意:本文中的“宽度”指的是“逻辑宽度”,而不是CSS width ;也就是说,这些值对CSS的 height 如果语言方向是垂直的(如东亚语言),或在flexbox或网格中。 min-content 和 max-content 是的有效值 宽度 , 高度 , min-width , min-height , max-width , max-height 还有更多的属性(比如 flex-basis )

盒子的内在尺寸是多少?

CSS尺寸级别3引入了 内在的 尺寸-与 外在的 . 安 外在的 框的尺寸是在框的父框上计算的。例如 width: 80% 据说是 外在维度 作为 宽度 主题取决于 宽度 它的容器。

与此相反, width: min-content 据说 内在的 因为盒子的宽度是根据盒子本身所包含内容的尺寸来计算的。

内在的 维度是框本身的属性,只有将框放置在文档中并允许计算这些值的上下文中时,外部维度才可用。例如,在CSS流(经典的CSS布局模式)中,您可能知道, height: 20% 只有当 高度 在父元素中定义(即它是可继承的);这是 外在的 不可计算的维度(当外部值不可用时,CSS将回退到其内部等效值)。相反 height: min-content 总是可以计算的 内在的 不管方框在文档中的位置(或方框不在),它始终是相同的。

定义 最小含量 和 最大含量 这些年来已经改变了很多次,但是结果总是保持不变,而且很容易掌握。他们最初是被社区要求作为 宽度 ,当框为 float 惯性导航与制导。实际上,这两个属性的定义最初是基于 浮动 ;现在更一般地定义如下:

最小含量

https://www.w3.org/TR/css-sizing-3/#min-content

一个盒子可以采用的最小尺寸不会导致溢出,选择较大的尺寸可以避免溢出。

换句话说, 盒子的最小宽度,盒子的内容不会溢出盒子本身。 .

一个很好的可视化方法是,事实上, 浮动 .

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

(GIF来源: http://jsfiddle.net/6srop4zu/ )

在上面的gif中, 红盒子的 最小内容宽度 等于蓝框宽度为0px时的红框宽度 (在gif中的234px,在jfiddle中可能不同)。

如你所见,如果红盒子变小了,这个词 supercalifragilisticexpialidocious 会溢出红盒,因此在这种情况下 最小含量 等于该特定单词的宽度,因为它是水平占用最多空间的单词。

最大含量

https://www.w3.org/TR/css-sizing-3/#max-content

当给定无限的可用空间时,框在给定轴上的理想大小。通常情况下,这是盒子在仍然适合其内容的情况下可以在该轴中采用的最小尺寸,即在避免溢出的同时最小化未填充的空间。

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

(GIF来源: http://jsfiddle.net/nktsrzvg/ )

在上面的gif中, 红盒子的 最大内容宽度 当蓝色框的宽度为无穷大时,等于红色框的宽度 (在GIF中为386px,在JSfiddle中可能不同)。

在这里,红框充分利用了蓝框中X轴上的可用空间,但不会浪费空间。允许内容在相关轴上无限制地展开,红框将其包裹在最大展开点。

怎么样 fit-content , stretch 其他人呢?这些地产目前正在重新评估,因此不稳定(日期:2018年7月)。当它们变得更成熟时(希望很快)就会添加到这里。