Web Platform Blog for China

Adobe

decor

Making the web awesome

归档

Monthly Archives: July, 2013

WebKit 中的 CSS 分片

分片是什么? CSS 2.1 规范定义了一个框模型以表示文档的布局,几乎任何内容均可视为框。普通流节点(例如并非绝对定位的节点)从其父元素框顶部开始,一个子元素接着一个子元素地进行排列。如果某个元素的框太小,以致无法容纳所有内容,则称此内容为溢出,而此溢出或者可见,或者经过剪切。 分片与溢出不同,因为前者允许内容流经多个称为分片容器的框。到达当前分片容器的结尾时进行中断,然后布局继续出现在下一个分片容器中。创作者也可使用 CSS 强制在某个元素之后或之前进行中断,甚至可完全不中断。 需要记住一个重要的细节,即分片并非意味着从某个框溢出并在视觉上将该溢出移至另一个框。分片在布局期间进行,并且影响内容框的尺寸。 CSS 中在分片方面有一些规范: CSS3 分页 – 文档经过适当的排列,使其可适合页面;页面充当分片容器。 CSS3 多列 – 元素定义若干填充其框的列以及排列内容之处;这些列充当分片容器。 CSS3 区域 – 所选内容形成一个在称为区域的框中排列的流;这些区域充当分片容器。 所有这些规范共同拥有一些常见的概念,这些概念在 CSS3 分片规范中有述。 流入两个区域的段落示例。 WebKit 中的分片 布局过程 要完全理解此处展示的概念,您应对 WebKit 中的布局方式有所了解。网上有一些不错的文章介绍这些基础知识,如 Bem 撰写的文章。 简而言之,DOM 树在内部映射到一个呈现树,而后者用于构建每个节点的框属性。呈现树由 RenderBox、RenderBlock、RenderInline 等对象组成,这些对象体现了在 CSS2.1 中定义的概念。在布局期间,将遍历此树,并根据样式值计算呈现器的各种几何属性。最后,所有元素计算其框信息。 另一方面,您将注意到 WebKit 中通常使用“分页”或“页面”术语命名符号。这一点是一些历史原因所致,但大多数时候,分页概念均与分片概念(页面、列或区域)一一对应。 在 WebKit 中可能已有多种方式可实现分片行为。其中一种方式为每个元素片段配备一个呈现器。例如,有一个 10 行的简单段落,其中在第 4 行之后中断,那么第一个分片容器中要有一个 4 行的呈现器,而第二个分片容器中要有另一个 6 行的呈现器。这两个呈现器都将属于初始元素。此方法难以正确地实现和维护,因为它使基本代码变得复杂。此外,从安全角度看,此方法也有很大风险,因为它可能会引入许多细微的内存管理缺陷。 出于这些考虑,现已制订一项规则,即每个... Continue reading →