外部尺寸确定(CSS本质和外部尺寸调整模块级别3)

时间:2018-10-08 23:18:13

标签: html css css3

Extrinsic Size DeterminationCSS 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

1 个答案:

答案 0 :(得分:2)

  

对于第二个项目符号,当宽度是周期性的时,如何将其确定为百分比呢?占块大小的百分比?

请再次参考第一句话的第一段,其中包含以下句子:

  

在计算包含块的大小时,百分比的作用是自动的。

第一步至关重要。除了给内容赋予任意大小外,无法确定包含块的大小。该尺寸是自动的。但是,为了保持一致性,然后将内容的宽度计算为指定的百分比,该百分比本身基于此新计算的包含块大小。

多年来,这一直是浏览器的可互操作行为,因此,除了现在已指定行为外,其他任何事情都没有真正改变。