1. 引言
本节非规范性内容。
在分页媒体(例如纸张、幻灯片、相册页面,或显示在计算机屏幕上的打印输出模拟)中,与连续媒体相反,文档的内容被分割为一个或多个独立的显示表面。为了避免不合适的断开(例如在文本行中间的分页),布局引擎必须能够重新调整落在分页上的内容。这个过程称为分页。
在 CSS 中,除了分页媒体外,某些布局功能如区域 [CSS3-REGIONS] 和 多列布局 [CSS3COL] 也会创建类似的分片环境。将内容分隔到不同容器中的通用术语是分片。本模块解释了内容如何在分片容器(分片容器)如页面和列中断开,以及作者如何控制这些断点。
1.1. 模块交互
本模块替代并扩展了在[CSS21] 第13.3节和[CSS3PAGE]中定义的分页控制。
1.2. 值
本规范遵循CSS 属性定义约定,参考自 [CSS21]。未在本规范中定义的值类型,定义于 CSS 值与单位[CSS-VALUES-3]中。其他 CSS 模块可能会扩展这些值类型的定义。
除了在各自定义中列出的特定属性值外,本规范中定义的所有属性也接受 CSS 通用关键词 作为其属性值。为了可读性,未显式重复这些关键词。
2. 分片模型和术语
- 分片容器 (分片器)
- 一个盒子——例如页面盒、列盒或区域——包含一个分片流的一部分(或全部)。分片器可以是预定义的,也可以根据需要生成。当可分页内容会溢出一个分片器的块维度时,它会转而断开到其分片上下文中的下一个容器。
- 分片上下文
- 一系列有序的分片器,例如由多列容器、一系列CSS 区域或分页媒体显示创建。给定的分片上下文只能在其所有分片器之间具有一个块流方向。(分片根的后代可能具有其他块流方向,但分片将根据施加在分片根上的块流方向进行。)
- 分片流
- 在分片上下文中布局的内容。分片流由一个(可能是匿名的)盒子的内容组成,称为分片根。
- 分片方向
- 分片上下文的块流方向,即内容分片的方向。(在此级别的 CSS 中,内容仅在一个维度上进行分片。)
- 分片
- 将内容流分割到形成分片上下文的分片器上的过程。
- 盒子分片或分片
- 属于恰好一个分片器的盒子的部分。一个在连续流中的盒子始终只包含一个分片。一个在分片流中的盒子包含一个或多个分片。每个分片都有其自己的盒子边框、填充和边距的份额,因此有其自己的填充区域、边框区域和边距区域。(参见盒子装饰断裂,它控制这些如何受到分片的影响。)
- 剩余分片器范围
- 在块轴上,在给定元素可用的分片器中,指的是前一个内容的末尾和分片器边缘之间的空间。
每个分片断点(以下简称断点)结束当前分片器中分片盒子的布局,并导致剩余内容在下一个分片器中进行布局,在某些情况下,会导致生成新的分片器以容纳待处理的内容。
将内联内容分割为行是另一种形式的分片,并且在其内联盒子跨越行盒子时,类似地会创建盒子分片。但是,此处不涉及内联断裂;请参见[CSS21]/[CSS3TEXT]。
由于文本的双向重排,盒子也可以被分割为多个分片(参见应用双向重排算法在CSS 写作模式),或更高级别的显示类型盒子分割,例如内联中的块分割(参见CSS2§9.2)或块中的跨列分割(见CSS 多列布局)。在这些情况下,划分为盒子分片并不依赖于布局(内容的大小/定位)。
2.1. 并行分片流
当多个格式上下文并排布局时,分片在每个格式上下文中独立执行。例如,如果一个元素是浮动的,则浮动内部的强制换行不会影响浮动外部的内容(除了可能增加浮动的高度)。用户代理可以(但不要求)调整并行格式上下文中的非强制换行的位置,以便在视觉上平衡并排内容,但不得如此来匹配强制换行。
以下是会独立分片的并行流示例:
- 浮动内容与浮动外部包裹内容。
- 浮动内容与相邻浮动内容。
- 单个表格行中每个表格单元格的内容。
- 单个网格行中每个网格项的内容。
- 弹性布局行中每个弹性项的内容。
- 绝对定位元素的内容,这些元素覆盖其包含块的分片上下文的相同范围。
溢出固定大小盒子内容边缘的内容被视为与固定大小盒子后面的内容并行,并遵循正常的分片规则。尽管溢出内容不会影响分片根盒子的大小,但它确实增加了分片流的长度,根据需要溢出或生成额外的分片器。
2.2. 嵌套分片流
破坏一个分片器 F 实际上将分片器分割为两个分片器(F1 和 F2)。唯一的区别在于,就分片器 F的内容而言,两个部分之间的断裂类型是由分割F的分片上下文创建的断裂类型,而不是由F自身的分片上下文通常创建的断裂类型。
3. 控制断裂
以下部分解释了如何在分片流中控制断裂。两个盒子之间的页面/列/区域断裂机会受包含块的break-inside属性、前一个元素的break-after属性以及后一个元素的break-before属性的影响。两个行盒子之间的页面/列/区域断裂机会受包含块的break-inside、widows和orphans属性的影响。根据这些属性的值,分片断裂可以被允许、强制或不鼓励。强制断裂会覆盖在该断裂点作用的任何断裂限制。对于强制页面断裂,作者还可以指定后续内容应在哪一页(左或右)恢复。
请参阅关于断裂规则部分,以了解这些属性如何影响分片的确切规则。
3.1. 盒子之间的换行:break-before 和 break-after 属性
名称: | break-before, break-after |
---|---|
值: | auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region |
初始: | auto |
适用对象: | 块级盒子、网格项、弹性项、表格行组、表格行(但见文中说明) |
继承: | 否 |
百分比: | 不适用 |
媒体: | 视觉 |
计算值: | 指定的关键字 |
规范顺序: | 按语法 |
动画类型: | 离散 |
这些属性指定生成的盒子之前/之后的页面/列/区域换行行为。强制换行值 left、 right、 recto、 verso、 page、 column 和 region 在流中创建一个强制换行,而 避免换行值 avoid、 avoid-page、 avoid-column 和 avoid-region 表明内容应保持在一起。
break-before 和 break-after 的值在下面的小节中定义。用户代理必须将这些属性应用于分片根的正常流中的盒子。用户代理还应将这些属性应用于其包含块在根分片元素的正常流中的浮动盒子。用户代理还可以将这些属性应用于其他盒子。用户代理不得将这些属性应用于绝对定位的盒子。
通用换行值
这些值对包含流的分片上下文类型没有影响。
- auto
- 在主盒子之前/之后既不强制也不禁止换行。
- avoid
- 避免在主盒子之前/之后换行。
页面换行值
这些值仅在分页上下文中有效;如果流不在分页中,则它们无效。
- avoid-page
- 避免在主盒子之前/之后换页。
- page
- 始终强制在主盒子之前/之后换页。
- left
- 强制在主盒子之前/之后进行一个或两个换页,以便下一个页面格式为左侧页面。
- right
- 强制在主盒子之前/之后进行一个或两个换页,以便下一个页面格式为右侧页面。
- recto
- 强制在主盒子之前/之后进行一个或两个换页,以便下一个页面格式为左侧页面或右侧页面,具体取决于在页面幅面中的顺序。
- verso
- 强制在主盒子之前/之后进行一个或两个换页,以便下一个页面格式为左侧页面或右侧页面,具体取决于在页面幅面中的顺序。
列换行值
这些值仅在多列上下文中有效;如果流不在多列上下文中,则它们无效。
- avoid-column
- 避免在主盒子之前/之后换列。
- column
- 始终强制在主盒子之前/之后换列。
区域换行值
这些值仅在多区域上下文中有效;如果流不跨多个区域链接,则这些值无效。
- avoid-region
- 避免在主盒子之前/之后换区域。
- region
- 始终强制在主盒子之前/之后换区域。
3.1.1. 子元素到父元素的换行传播
由于换行仅允许在同级元素之间进行,而不允许在盒子与其容器之间进行(见可能的换行点),因此应用于父元素开始/结束的子元素上的换行值会被传播到父元素,在那里可以生效。
具体来说——
换行传播不影响计算值;它是对元素计算值进行布局的解释的一部分。
3.2. 盒子内部的换行:break-inside 属性
名称: | break-inside |
---|---|
值: | auto | avoid | avoid-page | avoid-column | avoid-region |
初始: | auto |
适用对象: | 所有元素,除了内联级盒子、内部 ruby 盒子、表格列盒子、表格列组盒子和绝对定位的盒子 |
继承: | 否 |
百分比: | 不适用 |
媒体: | 视觉 |
计算值: | 指定的关键字 |
规范顺序: | 按语法 |
动画类型: | 离散 |
此属性指定元素主盒子内部的页面/列/区域换行行为。值的含义如下:
- auto
- 在盒子内不施加额外的换行约束。
- avoid
- 避免在盒子内换行。
- avoid-page
- 避免在盒子内换页。
- avoid-column
- 避免在盒子内换列。
- avoid-region
- 避免在盒子内换区域。
3.3. 行间换行:orphans, widows
名称: | orphans, widows |
---|---|
值: | <整数> |
初始: | 2 |
适用对象: | 块容器,这些容器建立了一个内联格式上下文 |
继承: | 是 |
百分比: | 不适用 |
媒体: | 视觉 |
计算值: | 指定的整数 |
规范顺序: | 按语法 |
动画类型: | 按计算值类型 |
orphans属性指定块容器中在换行之前必须留在一个碎片中的最小行盒数。 widows属性指定块容器中在换行之后必须留在一个碎片中的最小行盒数。 关于它们如何用于控制碎片换行的示例在下方给出。
只有正整数允许作为orphans和widows的值。 负值和零是无效的,必须导致该声明被忽略。
如果一个块包含的行数少于widows或orphans的值,那么规则变为必须将块中的所有行保持在一起。
3.4. 页面换行别名:page-break-before、page-break-after 和 page-break-inside 属性
为了与CSS第2级兼容,符合[CSS21]的用户代理必须将page-break-before、page-break-after和page-break-inside 属性映射到break-before、break-after和break-inside,通过将page-break-*属性视为传统简写,映射到break-* 属性,映射如下:
简写(page-break-*)值 | 长写(break-*)值 |
---|---|
auto | left | right | avoid | auto | left | right | avoid |
always | page |
4. 换行规则
一个碎片流可以在多个碎片容器中按多个可能的换行点进行拆分。在强制换行的情况下,用户代理需要在该点进行换行。而在非强制换行的情况下,用户代理必须在允许的换行点中进行选择。
为了确保进展,假定碎片容器的最小块尺寸为1px,无论其使用的大小如何。
4.1. 可能的换行点
碎片化在块流维度上分裂盒子。在块和内联流中,换行可能发生在以下位置:
- 类别 A
- 在以下类型的同级盒子之间:
- 块并行碎片化
- 当同级容器的块流方向与碎片化上下文的方向平行时:流中的块级盒子,一个浮动盒子和一个紧邻的流中或浮动盒子,表格行组盒子,表格行盒子,多列列行盒子。
- 块垂直碎片化
- 当同级容器的块流方向与碎片化上下文的方向垂直时:表格列组盒子,表格列盒子,多列列盒子。
- 类别 B
- 在块容器盒子内部的行盒子之间。
- 类别 C
- 在块容器盒子的内容边缘与其子内容的外边缘(块级子项的边距边缘或内联级子项的行盒边缘)之间,如果它们之间有(非零)间隙。
这些断点类之间没有固有的优先顺序。 然而,个别断点可以通过使用 断点控制 来优先或去优先。
其他布局模型可能会向上述类添加断点。 例如,[CSS-FLEXBOX-1] 在灵活的格式上下文中添加了某些点 到 A 类和 C 类中。
一些内容是不可碎片化的,例如许多类型的 替换元素 [CSS21](例如图像或视频), 可滚动元素,或一行文本内容。 此类内容被认为是 单体的: 它不包含可能的断点。 因此,在此类框内的任何强制断点 都无法拆分该框, 因此也必须被其自身的碎片化上下文忽略。
除了任何通常不可碎片化的内容外, 用户代理(UA)还可以将 单体的 视为 任何 overflow 设置为 auto 或 scroll 的元素,以及任何具有 overflow: hidden 且具有非 auto 的 逻辑高度(并且没有指定的最大 逻辑高度)。
由于行框不包含任何可能的断点, inline-block 和 inline-table boxes (and other inline-level display types that establish an independent formatting context) may also be considered monolithic: that is, in the cases where a single line box is too large to fit within its fragmentainer even by itself and the UA chooses to split the line box, it may fragment such boxes or it may treat them as monolithic.
4.2. 换行类型
CSS 中有不同类型的换行,根据它们跨越的碎片容器的类型进行定义:
- 分页符
- 在两个页面盒子之间的换行。[CSS3PAGE]
- 跨页换行
- 在两个不关联的对页之间的换行。跨页换行始终也是一个分页符。[CSS3PAGE]
- 列换行
- 在两个列盒子之间的换行。请注意,如果列盒子位于不同的页面上,则该换行也是一个分页符。类似地,如果列盒子位于不同的区域中,则该换行也是一个区域换行。[CSS3COL]
- 区域换行
- 在两个区域之间的换行。请注意,如果区域盒子位于不同的页面上,则该换行也是一个分页符。[CSS3-REGIONS]
第五种断点是 换行,这是在两个 行框 之间的断点。 这些内容不在本规范中涵盖;请参见 [CSS21] 和 [CSS3TEXT]。
4.3. 强制换行
强制换行是由样式表作者明确指示的换行。在强制换行发生在类别 A 换行点,如果在前一个同级盒子上指定的或传播的换行后属性和在后一个同级盒子上指定的或传播的换行前属性中,有至少一个具有强制换行值。(因此,强制换行值有效地覆盖在该换行点上也适用的任何避免换行值。)
当多个强制换行值适用于单个换行点时,它们组合在一起,以便所有类型的换行都得以满足。当左、右、正面和/或背面组合时,流中最新元素上指定的值优先。
如果在该边距上方的最后一行盒子和下方的第一行盒子没有相同的页面值,则必须在类别 A 换行点处也发生强制分页。请参见[CSS3PAGE]。
当强制换行发生时,它会将后续内容强制转移到与该换行相关联的下一个碎片容器中,直到满足所有指定的换行类型为止,打破尽可能多的碎片上下文。如果强制换行不包含在匹配类型的碎片上下文中,则强制换行无效。
4.4. 非强制换行
虽然换行控制可以强制换行,但它们也可以阻止换行。非强制换行是指由用户代理(UA)自动插入的换行,以防止内容溢出碎片容器。以下规则控制在可能的换行点是否允许非强制换行:
- 规则 1
- 仅当适用于此换行点的所有换行后和换行前值允许时,碎片流可以在类别 A 换行点换行,这种情况下至少有一个强制换行,或者它们都不禁止换行(根据避免或避免页面/避免列/避免区域,具体取决于换行类型)。
- 规则 2
- 但是,如果所有这些值都是自动,且所有元素的共同祖先的换行内部值为避免,则不允许在此处换行。
- 规则 3
- 仅当换行与包含块的起始位置之间的行盒子数等于孤行的值或更多,并且换行与块的结束之间的行盒子数等于widows的值或更多时,允许在类别 B 换行点处换行。
- 规则 4
- 此外,仅当所有祖先的换行内部属性为自动时,才允许在类别 B或类别 C换行点处换行。
如果上述内容没有提供足够的换行点以防止内容溢出碎片容器,则将取消规则 3 以提供更多的换行点。
如果仍然没有足够的换行点,则依次取消规则 1、2 和 4 以查找额外的换行点。在这种情况下,用户代理可以根据那些点的避免来权衡新换行点的适宜性;然而,本规范并未建议使用精确算法。
如果即使这样仍未能产生足够的换行点,则将在块末端截断克隆的边距/边框/填充;如果仍需要更多空间,则块末端也会截断克隆的边距/边框/填充。
最后,如果在碎片容器的顶部没有可能的换行点,并且所有内容未能适配,用户代理可以在任意位置换行,以避免内容从碎片容器的边缘丢失。 在这种情况下,用户代理还可以通过切割元素的图形表示来分割单体元素的内容。然而,用户代理不得在页面顶部换行,即它必须在每个碎片容器中至少放置一些内容,以确保每个碎片容器都有非零的内容量,以确保内容的持续展示。
4.5. 优化非强制换行
虽然 CSS3 要求碎片流必须在允许的换行点换行,以避免溢出其碎片容器中的内容,但并未定义内容是否在特定的允许换行处换行。然而,建议用户代理遵循以下指导方针(虽然承认这些指导方针有时是相互矛盾的):
- 尽可能少换行。
- 确保所有不以强制换行结束的碎片容器看起来都同样充满内容。
- 避免在替换元素内部换行。
举例来说,假设样式表包含孤行:4、widows:2,并且当前页面底部可用空间为 20 行(行盒子):
- 如果块包含 20 行或更少,则应放置在当前页面上。
- 如果块包含 21 或 22 行,则段落的第二个碎片必须不违反widows约束,因此第二个碎片必须至少包含两行;同样,第一块必须至少包含四行。
- 如果块包含 23 行或更多,则第一块应包含 20 行,第二块包含剩余行。但是,如果块的任何碎片放置在当前页面上,则该碎片必须至少包含四行,第二个碎片至少包含两行。
现在假设孤行为10,widows为20,而当前页面底部可用空间为 8 行:
- 如果块包含 8 行或更少,则应放置在当前页面上。
- 如果块包含 9 行或更多,则不得拆分(这将违反孤行约束),因此必须作为一个块移至下一页。
此外,CSS 还强加了一项要求:零大小的框碎片由于不占用空间,必须在能够适合其碎片容器的情况下出现在碎片化换行的早期侧面。
注意:如果零大小的框碎片被放置在紧跟着的内容之后,并且该内容溢出碎片容器,则将推送到下一个碎片容器。
5. 损坏的盒子模型
本节中使用的大小术语定义在[CSS3-SIZING]中。
5.1. 进入不同大小的碎片容器
当流被分割成不同大小的碎片容器时,将遵循以下规则来调整布局:
- 布局在每个碎片容器内执行,每个碎片容器继续从上一个断点开始进度,但使用其自身的大小重新计算大小和位置,就好像整个元素在这种大小的碎片容器中被分割一样。进度以已用/剩余碎片容器的比例(而非绝对长度)和已用/剩余内容的量来衡量。 然而,在布局单体元素时,用户代理可以保持一致的内联大小和解决的块大小,跨越碎片容器。
- 内在大小在整个元素中计算和维护。 当需要初始包含块大小来解析内在大小时,假设为定义碎片化上下文的第一个碎片容器的大小。
- 从先前的碎片容器开始的盒子碎片必须遵循放置规则,并额外约束:碎片不能被放置在碎片容器的块起始边缘上方。
如果这导致盒子的续片碎片从碎片容器的块起始边缘移开,则如果指定了box-decoration-break: clone,它会在碎片周围包裹盒子的边距以及填充和边框。
在不同大小的碎片容器中断裂的插图。
由于文档中元素的顺序在碎片化过程中不会改变,碎片会按照适用于连续媒体的相同规则进行处理。特别是,浮动的顺序在所有碎片中得以保留,并遵循 CSS 2.1 第 9.5 节中定义的相同规则。
以下是这些规则的一些(信息性)影响:
- 盒子(包括表格)在其拉伸适合或基于百分比的大小上满足布局约束时,可能会在页面之间更改内联大小。
- 盒子(包括表格)在其最小内容、最大内容或绝对长度大小上满足布局约束时,会在页面之间保持其内联大小。
- 如果块级续片碎片可能位于页面顶部下方,例如它建立了块格式上下文并位于浮动旁边,而它和浮动都继续到一个太窄而无法并排放置的页面上,则该块级续片碎片可以放置在页面顶部下方。
- 与先前浮动相邻的元素可能在下一页上出现在浮动的续片上方,例如,如果该浮动被推下,因为它不再适合与继续到此更窄页面的早期浮动并排放置。
- 左浮动可能在页面上出现在前面,而之前的右浮动的剩余碎片将无法适应在早期页面上。然而,另一个右浮动将被迫向下移动,直到可以放置之前的右浮动的剩余碎片。
以下是一个示例,展示了基于百分比的进度的使用:假设我们有一个绝对定位的元素,其位置为top: calc(150% + 30px),并且具有height: calc(100% - 10px)。如果它被放置在一个具有第一页面高度为 400px、第二页面为 200px、第三页面为 600px 的分页上下文中,其布局进展如下:
- 首先,顶部位置是根据第一页的高度解析的。这导致 630px。由于第一页的高度只有 400px,布局转移到第二页,记录的进度为 400/630 = 63.49%,剩余 36.51%。
- 现在在第二页,顶部位置再次解析,这次是根据第二页的高度。结果为 330px。剩余的 36.51% 进度因此解析为 120.5px,将元素的上边缘放置在第二页的 120.5px 处。
- 现在高度是根据第二页解析的;它解析为 190px。由于页面上仅剩 79.5px,布局转移到第三页,记录的进度为 79.5/190 = 41.84%,剩余 58.16%。
- 在第三页,高度解析为 590px。剩余的 58.16% 进度因此解析为 343.1px,适合在此页面上,并完成该元素。
5.2. 相邻边距在断裂处的处理
当块级盒子之前或之后发生未强制断裂时,与断裂相邻的任何边距会被截断为零。 当发生强制断裂时,断裂前的相邻边距会被截断,但断裂后的边距会被保留。克隆的边距在块级盒子上始终被截断为零。
注意: CSS Fragmentation Level 4 将引入对断裂时边距截断的控制。
5.3. 拆分盒子
当盒子发生断裂时,其内容盒子会扩展以填充任何剩余碎片容器范围(为任何由box-decoration-break: clone应用的边距/边框/填充留出空间)在内容在下一个碎片容器上恢复之前。 (推送内容到下一个碎片容器的碎片化断裂有效地增加了盒子内容的块大小。)
由于盒子的分割所贡献的额外块大小(即从断裂点到碎片容器边缘的距离)将对盒子指定的任何限制的块大小产生贡献。
填充剩余碎片容器范围的插图。
5.4. 分段边框和背景:box-decoration-break属性
名称: | box-decoration-break |
---|---|
值: | slice | clone |
初始: | slice |
适用于: | 所有元素 |
继承: | 否 |
百分比: | 不适用 |
媒体: | 视觉 |
计算值: | 指定的关键字 |
规范顺序: | 根据语法 |
动画类型: | 离散 |
当发生断裂(页、列、区域、行)时,box-decoration-break属性控制:
- 盒子的边距、边框、填充和其他装饰是否包裹着盒子片段的断裂边缘
- 如何从盒子片段中衍生或重复背景定位区域[CSS3BG](以及遮罩定位区域 [CSS-MASKING-1]、形状参考盒[CSS-SHAPES-1]等)以及元素的背景在其中的绘制方式。
值的含义如下:
- clone
- 每个盒子片段都独立地用边框、填充和边距包裹。border-radius和border-image以及box-shadow(如果有的话)都应用于每个片段。背景在每个元素的片段中独立绘制。因此,无重复背景图像将在元素的每个片段中渲染一次。
注意: 克隆的边距在块级盒子上被截断为零。
- slice
-
该效果就像元素在没有断裂的情况下被渲染,然后在之后被断裂: 断裂处没有插入边框和填充; 在断裂边缘不会绘制盒阴影; 背景、border-radius和border-image按整个盒子的几何形状应用,就好像它是未断裂的。
box-decoration-break的两种可能性:左侧为值slice,右侧为值clone。
用户代理还应应用 box-decoration-break 来控制在双向强制断点的渲染——即当双向重排导致行内元素分裂成不连续的片段时——以及/或在显示类型强制断点的渲染——即当一个更高层次的 显示类型(如 块级框 / 列跨度)拆分一个不兼容的祖先元素(例如 行内框 / 块容器)。否则,此类断点必须作为 slice 进行处理。有关更多信息,请参见 应用双向重排算法 在 CSS 写作模式,CSS2§9.2 块级元素和块框,以及 CSS 多列布局 §6 跨度列。
对于内联元素,哪个片段被视为断裂边缘是由父元素的内联进程方向决定的。例如,如果一个内联元素的父元素有direction: rtl,在两个行之间断裂时,第一行片段的左侧将是断裂边缘。特别注意,不使用元素自身的direction或其包含块的direction。请参见[CSS3-WRITING-MODES]。
5.4.1. 为slice连接盒子
对于box-decoration-break: slice,背景(和border-image)将被绘制为好像应用于一个复合盒,该盒由所有盒子的片段重新组合而成,按照视觉顺序排列。这个理论上的组合发生在元素布局后(包括任何调整、双向重排、页面断裂等)。要组合复合盒...
- 对于跨行断裂的盒子
- 首先,同一行上的片段按视觉顺序连接。然后,后续行上的片段根据元素的内联基本方向进行排序,并在元素的主基线对齐。例如,在一个从左到右的包含块中(direction为ltr),第一个片段是在第一行的最左侧片段,后续行上的片段被放置在其右侧。在从右到左的包含块中,第一个片段是在第一行的最右侧,后续片段被放置在其左侧。
- 对于跨列断裂的盒子
- 片段连接就好像列盒子在多列容器的块流方向中被粘合在一起。
- 对于跨页面断裂的盒子
- 片段连接就好像页面内容区域在根元素的块流方向中被粘合在一起。
- 对于跨区域断裂的盒子
- 片段连接就好像区域内容区域在块流方向中被粘合在一起,该方向是主要书写模式的区域链。
如果盒子片段的宽度不同(如果片段是水平连接,则高度不同),那么每个片段绘制其部分背景,假设整个元素的宽度(高度)与该片段相同。然而,如果图像的使用高度(宽度)是从盒子的宽度(高度)推导的,那么它将使用最宽片段的宽度计算,并保持固定大小。这确保右对齐的图像保持与右边缘对齐,左对齐的图像保持与左边缘对齐,居中的图像保持居中,拉伸的图像按预期覆盖背景区域,同时在片段之间保持连续性。
5.5. 转换、定位和分页
片段化与布局相互作用,因此发生在相对定位[CSS21]、变换[CSS3-TRANSFORMS]和任何其他图形效果之前。这样的效果是按片段应用的:例如,应用于片段盒子的旋转将计算每个片段的旋转原点,并独立地围绕其原点旋转该片段。(仅溢出的片段的原点确定为该内容溢出一个零边距/边框/内边距的空盒子的开始。)然而,为了减少打印时的数据丢失,页面盒子的分离和转移应该最后发生;因此,跨页的变换片段应该在页面断裂处被切割,并完整打印,而不是被其起始页面裁剪。
一个固定高度的盒子跨越2.5页,溢出内容总共跨越4页。每个片段的变换原点是其边框盒的中心;没有边框盒的片段假设在溢出开始时有一个零高度的盒子。
绝对定位会影响布局,因此与片段化相互作用。属于包含块的坐标系和绝对定位的盒子将在与包含块相同的片段流中跨越片段容器。
UAs 不需要正确定位跨越片段化断裂且其块起始边缘位置取决于盒子内容片段的位置。
由于内存限制,UAs可能无法在内存中操作整个文档,因此不需要正确定位最终位于之前渲染页面的绝对定位元素。
更改
自2016年1月14日候选推荐以来,做出了以下重大更改:
-
澄清了对 page-break-* 属性的别名机制。
(问题 866)
通过将page-break-*属性视为
简写遗留简写 对break-*属性 - 澄清了断裂传播不影响计算值,并且其他布局模式(例如 flex 和 grid)会调整基本的断裂传播规则,并更正了子到父的传播以忽略流出框子元素。 (问题 2614) 参见§3.1.1 子→父断裂传播。
-
澄清了widows和orphans对不直接包含行盒的块容器没有影响。
(问题 1823)
适用:块容器 建立一个新的内联格式化上下文
-
澄清了 Class C 断裂相邻的边距也以与相邻兄弟(Class
A)相同的方式截断。
(问题 3073)
当发生无强制断裂时
在在块级盒子之前或之后中,任何相邻的边距截断到剩余的片段容器范围 之前的断裂, 和被截断为零在断裂之后。 -
澄清了如果 UA 选择不将原子内联视为单片的含义。
(问题 1111)
由于行盒中不包含任何可能的断点,inline-block和inline-table盒子 (以及建立独立格式化上下文的其他内联级显示类型) 也可能被视为单片 也就是说, 在单个行盒子太大以至于无法单独适应其片段容器的情况下,UA 选择拆分行盒, 它可能会分割此类盒子,也可能将其视为单片。
-
添加了零大小片段必须留在之前片段容器的要求。
(问题 1529)
此外,CSS 对此有一个要求: 一个零大小的盒片段, 由于它不占用空间, 必须出现在片段化断裂的早期侧面,如果它能够适应片段容器。
-
澄清了双向强制断裂和块内双向断裂会创建片段,并且它们的格式化应由box-decoration-break控制。
(问题 1706)
由于文本的双向重排,盒子可能会断裂为多个片段(参见应用双向重排序算法在CSS书写模式)或更高层次的显示类型盒子的断裂,例如块内双向断裂(参见CSS2§9.2)或跨列的块内断裂(参见CSS多列布局)。在这些情况下的盒子片段的分裂不依赖于布局(内容的大小/定位)。
UAs
可以应 还应应用box-decoration-break来控制在双向强制断裂时的渲染—即当双向重排导致内联断裂为非连续片段时—以及/或在显示类型强制断裂时—即当更高层次的显示类型(例如块级盒子/列跨度)将不兼容的祖先分裂(例如内联盒子/块容器)。 否则,这些断裂必须像slice那样处理。 参见应用双向重排序算法在CSS书写模式、CSS2§9.2块级元素和块盒子以及CSS多列布局§6跨列。 - 做了一些微不足道的措辞修正。
提供了评论处理。
自2015年1月29日工作草案以来,进行了以下重大更改:
- 删除了break-*的any和always值。
- 将widows和orphans与break-*限制的优先级进行了调换,使得widows和orphans的优先级降低而不是提高。
- 定义了在box-decoration-break: clone中边距也会被克隆(但在块级布局中会被截断)。
- 纠正了无强制断裂规则(A类),以处理新的断裂类型(原始规则仅处理页面断裂)。
- 允许在没有空间时放弃克隆的盒子装饰。
提供了评论处理。
致谢
编辑们感谢 Mihai Balan, Michael Day, Alex Mogilevsky, Shinyu Murakami, Florian Rivoal, 和 Alan Stearns 对此模块的贡献。 特别感谢前[CSS3PAGE]编辑 Jim Bigelow(HP), Melinda Grant(HP), Håkon Wium Lie(Opera), 和 Jacob Refstrup(HP) 对本规范的贡献,该规范是他们工作成果的继承者。