9.1 可视化格式模型介绍(done) - acelan86/css GitHub Wiki

本章中你可能需要知道的一些名词:

  • 客户端代理:对我们来说一般指浏览器。
  • 媒体:展现页面的介质。例如,纸,听觉浏览器和显示器等

本章和下章描述可视化格式模型:客户端代理为视觉媒体处理文档树的方式。

This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media.

在可视化格式模型中,文档树中的每一个元素依据按照盒模型生成0个或多个盒。这些盒的布局由以下内容决定:

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

  • 盒子的尺寸和类型
  • 定位方案(正常流,浮动和绝对定位)
  • 文档树中的元素之间的关系
  • 外部信息(例如,视窗大小,图片元素的固有尺寸等)
  • box dimensions and type.
  • positioning scheme (normal flow, float, and absolute positioning).
  • relationships between elements in the document tree.
  • external information (e.g., viewport size, intrinsic dimensions of images, etc.).

本章和下章定义的属性应用于页面媒体延展媒体,然而,在页面媒体中,margin属性有不同的意义(详见页面模型)。

The properties defined in this chapter and the next apply to both continuous media and paged media. However, the meanings of the margin properties vary when applied to paged media (see the page model for details).

可视化格式模型没有明确说明格式模型的所有特征(例如,它没有明确letter-spacing算法)。因此,一致性客户端代理对这些规范没有覆盖到的格式化问题可能会有不同的实现。

The visual formatting model does not specify all aspects of formatting (e.g., it does not specify a letter-spacing algorithm). Conforming user agents may behave differently for those formatting issues not covered by this specification.

9.1.1 视窗

延展媒体的客户端代理通常提供一个视窗(屏幕上一个窗口或者其他显示区域)供用户查阅文档。当视窗大小改变的时候客户端代理会改变文档布局(见默认包含块)。

译注:默认包含块,这里指根元素(root element,这里指html元素)的包含块,由视窗提供。

User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document's layout when the viewport is resized (see the initial containing block).

当视窗比文档渲染出来的画布区域小时,客户端代理应该提供一个滚动机制。每个画布至少应该有一个视窗,但客户端代理可以渲染出多个画布(例如:给同一个文档提供不同的展现)。

When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism. There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document).

9.1.2 包含块(containing blocks)

在CSS2.1中,大多数盒子的位置和大小都是通过一个叫做“包含块containing block”的矩形盒子的边缘来计算的。通常,生成的盒子给它的子孙盒充当包含块的角色;我们说一个盒子为他的子孙“建立”了包含块。而“盒子的包含块”这种说法,是指“这个盒子所处的那个包含块”, 并不是指它生成的那个。

In CSS 2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.

每个盒子被赋予一个与它的包含块相关联的位置,但不受这个包含块限制;它可以溢出

Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

如何计算包含块尺寸的细节在下一个章节描述。

The details of how a containing block's dimensions are calculated are described in the next chapter.

译注:注意,元素的包含块是它的祖先元素创建但不是它的祖先元素本身(一般是由祖先元素的内容边界提供,但是包含块的区域不一定就是它的祖先元素的内容区域)。


译注,本章重点概念:

  • 元素的尺寸和位置的计算与它的一个称作包含块的矩形区域相关
  • 包含块不是一个真实存在的东西,它由元素的祖先元素生成(一般是其父元素或者其他祖先元素的内容边界提供)
  • 默认包含块是指根元素的包含块,它由视窗提供
  • 注意盒子的包含块盒子产生的包含块两种描述的区别