min-contentmax-content值在CSS中是如何计算的?

内在维度意味着什么?

推荐答案

注:本文中的"宽度"指的是"逻辑宽度",而不是CSS的width;也就是说,如果语言方向是垂直的(如东亚语言),或者在flexbox或grid中,那么这些值对于CSS的height也是有效的.最小含量最大含量widthheightmin-widthmin-heightmax-widthmax-height甚至更多属性(如flex-basis)的有效值.

What are the intrinsic dimensions of a box?

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的关键字,当框为floating时,其计算值将与框的宽度匹配.事实上,这两个属性的定义最初基于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; }

max content

(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-contentstretch和其他的呢?这些财产目前正在重新审查,因此它们不稳定(日期:2018年7月).当他们变得更成熟一些(希望很快)时,他们将被添加到这里.

Css相关问答推荐

在ReactJS中使用动画在栅格上添加柱

如果`line-Height:1`,则垂直字母所占的高度

使用SVG以竖排书写模式创建渐变文本时,文本显示异常

尽管 URL 路径正确,但背景图像未显示

当前的 html 标签没有发生两列布局

使用 :checked 显示隐藏的侧面板

CSS 字符串变量的正确null值是多少?

老虎机插槽上的 CSS 对齐问题

页脚上方的图像分隔线使用 ::before 伪元素

圆形加载动画

包装器内两个跨度之一上的文本溢出省略号

绝对位置和溢出:隐藏

如何隐藏 Chrome 中 HTML5
元素上默认显示的箭头?

如何在 Flexbox 中禁用等高列?

如何在 CSS 中延迟 :hover 效果?

在 CSS 中使用多个 @font-face 规则

如何将页脚(div)与页面底部对齐?

CSS3 过渡:过渡:全部是否比过渡:x慢?

CSS属性中的auto值是什么意思.

从 textarea 中删除所有样式(边框、发光)