11.23 CSS 弹性布局分页(Pagination)

分页是对于非连续性介质在页面交替处如何处理内容的机制

对于一些纸面介质(被打印出来的文档),需要确定在页面交接处的内容如何处理,比如不能出现文字被中断的情况。这种处理机制在CSS3中被称之为“分页(Pagination)”,其工作方式和Word文档非常相似。

对于电脑屏幕页面制作而言,本章节内容可跳过。关于CSS3分页的完整描述可阅读[CSS3-BREAK]模块。

弹性容器可以在弹性项、弹性行(在多行模式中)以及在弹性项内部进行页面拆分。break-*属性对于弹性容器的作用和块级(block-level)或行内级(inline-level)框一样。本节描述它们如何应用于弹性项及其内容。

下面的拆分规则中将分段容器称为“页(page)”。为了可读性,在本节中,“行(row)”和“列(column)”指的是弹性容器相对于分段上下文block flow方向的相对定向,而不是弹性容器本身。

分段弹性容器的布局在CSS3中尚未被精确定义。但是,弹性容器内部的拆分(breaks)遵守以下规则:[CSS3-BREAK]

  • 在一个行弹性容器中,弹性项目上的break-before和break-after属性被传播到弹性行上,第一行上的break-before属性和最后一行上的break-after属性被传播到弹性容器。
  • 在一个列弹性容器中,第一行上的break-before属性和最后一行上的break-after属性被传播到弹性容器。其他项目的强制拆分(forced break)只作用于项目本身。
  • 一个弹性项目内的强制拆分将增加其内容的大小。它不会触发同级项目的内部拆分。
  • 在一个行弹性容器中,A类拆分出现在同级弹性项目之间,而C类拆分出现在第一个/最后一个弹性行和弹性容器内容边界之间。 在一个列弹性容器中,A类拆分出现在同级弹性项目之间,而C类拆分出现在第一个/最后一个弹性行中的弹性项目和弹性容器内容边界之间。
  • 当一个弹性容器被拆分后,弹性项的可用空间(在分段上下文的block流方向上)需要减去前页中弹性容器片段已经消耗掉的空间。一个弹性容器片段所消耗的空间是该页上的内容框的大小。如果由于该调整导致可用空间为负,则设置为零。
  • 如果弹性容器的第一个片段不在页面顶部,并且其中一些弹性项目不能适应页面上的剩余空间,整个片段将移动到下一页。
  • 当一个多行弹性容器被拆分时,每个片段都有它自己的弹性行“堆栈”,就像每一个多列元素的片段有自己的列框行。
  • 除了以上几点外,用户代理(如浏览器)的实现应尽量试图减少弹性容器的变形。

到本章节为止,我们基本上把CSS3引入的高级特性讲解完了。可以看到CSS3的布局和动画功能非常强大。接下来我们将进入HTML5进阶部分课程的学习。