注:本文中的"宽度"指的是"逻辑宽度",而不是CSS的width
;也就是说,如果语言方向是垂直的(如东亚语言),或者在flexbox或grid中,那么这些值对于CSS的height
也是有效的.最小含量
和最大含量
是width
、height
、min-width
、min-height
、max-width
、max-height
甚至更多属性(如flex-basis
)的有效值.
CSS大小调整级别3引入了intrinsic维的概念-与extrinsic维相反.长方体的extrinsic维是在长方体的父框上计算的.例如,width: 80%
被称为extrinsic dimension,因为主体的width
取决于其容纳盒的width
.
与此相反,width: 最小含量
被称为intrinsic,因为盒子的宽度是根据盒子本身包含的内容物的尺寸计算的.
Intrinsic尺寸是框本身的属性,外部尺寸仅在框被放置在文档中并且在允许计算这些值的上下文中时才可用.例如,在css-flow(classic CSS布局模式)中,您可能知道,height: 20%
只有在父元素中定义了height
时才有效(即它是可继承的);这是一个不可计算的extrinsic维的情况(当外部值不可用时,CSS后退到它的内在等效项).相反,height: 最小含量
始终是可计算的,因为它对于框本身是intrinsic,并且不管框在文档中的位置(或框是否存在),它始终是相同的.
多年来,最小含量
和最大含量
的定义发生了多次变化,但结果始终保持不变,而且很容易掌握.它们最初是由社区请求作为width
的关键字,当框为float
ing时,其计算值将与框的宽度匹配.事实上,这两个属性的定义最初基于float
的行为;现在它们更一般地定义如下:
最小含量
https://www.w3.org/TR/css-sizing-3/#最小含量个
盒子的最小尺寸不会导致溢出,可以通过 Select 更大的尺寸来避免.
换句话说,是the smallest width of a box where the box's contents don't overflow the box itself.
实际上,将其可视化的一个好方法是使用float
.
/* the computed width of #red in this example
equals to specifying #red { width: 最小含量 } */
#blue { width: 0px; }
#blue > #red { float: left; }
(GIF来源:http://jsfiddle.net/6srop4zu/)
在上面的GIF中,the red box's 最小含量 width equals the red box's width at the time the blue box's width is 0px(GIF中的234px,在jsfiddle中可能不同).
正如您所看到的,如果红色框变小,单词supercalifragilisticexpialidocious
将溢出红色框,因此在本例中,最小含量
等于该特定单词的宽度,因为它在水平方向上占用的空间最大.
最大含量
https://www.w3.org/TR/css-sizing-3/#最大含量
当给定无限可用空间时,盒子在给定轴上的"理想"大小.通常,这是框在该轴上可以容纳的最小尺寸,同时仍适合其内容,即最小化未填充的空间,同时避免溢出.
/* the computed width of #red in this example
equals to specifying #red { width: 最大含量 } */
#blue { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }
(GIF来源:http://jsfiddle.net/nktsrzvg/)
在上面的GIF中,the red box's 最大含量 width equals the red box's width when the blue box's width is infinite(在GIF中为386px,在JSFIDLE中可能不同).
在这里,红色方框充分利用了蓝色方框中x轴上的可用空间,但不会浪费它.内容可以不受限制地在相关轴上扩展,红色方框将其包装在最大扩展点.
那fit-content
、stretch
和其他的呢?这些财产目前正在重新审查,因此它们不稳定(日期:2018年7月).当他们变得更成熟一些(希望很快)时,他们将被添加到这里.