在Extrinsic Size Determination的CSS Intrinsic & Extrinsic Sizing Module Level 3 specification章中,我们可以阅读:
有时一个百分比大小的框包含的块的大小 取决于盒子本身的内在尺寸贡献, 循环依赖性。在计算包含块的大小时, 百分比表现为自动。然后,除非另有说明,否则 计算包含块的尺寸和位置 内容:
如果由于包含块上的 block-size 或 max-block-size 而引入了循环依赖关系,导致依赖于 内容的大小,该框的百分比尚未解析,而是 表现为自动。
否则,将根据包含块的大小来解析百分比。 (包含块的大小不会根据 盒子的最终尺寸;内容可能因此溢出或 使包含块下溢。
并且:
注意:这些规则指定了此操作以前未定义的行为 CSS2§10.2中的循环大小写。另请注意, CSS2§10.5被其各自的规范取代 布局模式(例如flex布局)未在CSS2中描述。
因此,假设horizontal-tb
writing-mode
,我们从第一个项目符号获悉,孩子的身高(也就是块大小)百分比为如果父项的大小基于子项(即它们形成周期性定义),则设置为auto
。
然后,第二个项目符号说,百分比实际上是针对周期性的宽度确定的。因此,对于宽度(与高度不同,在循环情况下CSS2中未定义宽度),应将其解析为百分比。
我的问题 对于第二个项目符号,当宽度是周期性的时,如何将宽度解析为百分比?占块大小的百分比?
编辑
在示例中,它显示宽度也变为auto
,这使我想知道自动转换规则应仅应用于block size
(也就是{{1}中的高度)是否是错字} horizontal-tb
)
答案 0 :(得分:2)
对于第二个项目符号,当宽度是周期性的时,如何将其确定为百分比呢?占块大小的百分比?
请再次参考第一句话的第一段,其中包含以下句子:
在计算包含块的大小时,百分比的作用是自动的。
第一步至关重要。除了给内容赋予任意大小外,无法确定包含块的大小。该尺寸是自动的。但是,为了保持一致性,然后将内容的宽度计算为指定的百分比,该百分比本身基于此新计算的包含块大小。
多年来,这一直是浏览器的可互操作行为,因此,除了现在已指定行为外,其他任何事情都没有真正改变。