Block-level Box & Block Container Box & Block Box

前几天,一位叫做colin朋友邮件问了我一个关于包含块的疑问,大致是说,css2.1定义里有这样一句:

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

但是国内的翻译资料,却是这样的:

它的包含块由它最近的块级、单元格(table cell)或者行内块(inline-block)祖先元素的内容框创建 到底包不包括行内块(inline-block)?

凭着一些以前对CSS标准的印象,我模糊地给出了一个我的理解,即inline-block虽然对外是行内元素,但是其内部格式化成块,能包含块级元素,所以仍然属于block container。虽然也没有错误,但显然不够清晰,也没能给出标准的参考依据。于是今天乘着有空翻了一下标准,发现自己的有部分知识结构随着时间慢慢模糊掉了,不过好在有印象,花一点时间能串的起来。

其实包含块的这个定义里的block container,确实包含了块级、单元格和行内块,造成混淆的原因是有如标题的这三个形似的概念导致的。

block container,如其名直译成块容器非常合适,能容的下块级元素的容器就能称为block container。和块级框(block-level box)的不同,block container是一个独立的概念,所以即使是行元素inline-block,由于其内部格式化为块因而能容纳块级元素,所以同样是block container。

block-level box是我们最熟悉的块级框,根据标准,其中除了table以及替换元素以外,每一个块级框都是一个block container。并且每一个是 block container 的 block-level box,称为 block box。

所以,块级框(block-level box)、块容器(block container)、块框(block box),是完全不同的三个概念。定义在CSS2.1 —— 9.2.1 Block-level elements and block boxes:

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level elements: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

所以,中文译文里的定义是准确的,大概是在翻译某个章节的时候出于纳入零散的知识点的目的,就把某个概念的锚点一起推广开来了。不知道是不是豆豆猫翻译的,因为在之前只见过他博客上的断断续续的译本。而且这种翻译风格,非常博客化,不像是严谨的文档校译。

不过这次一查之下,看到一个W3Help.org的网站,风格与W3C一致,内容多为W3C的中文译本和参考,只是风格仍然很博客化。大概是太久没关注国内的动态,出了几个参考级站点居然都没察觉囧...虽然内容仍然很有限,一些翻译仍然没有统一(比如W3Help上同时出现了“格式化上下文”和“格式化内容”两个概念,但都翻译自同一个术语formatting context),却仍已是不可多得了。

标准里的诸多术语其实非常严谨,本来标准就是一个描述,所以明白了各种概念之后,标准也就仅是一个认知性的文档。不过其中的相似的概念如果不仔细理解和区分,确实容易产生各种混淆。

自从来到杭州上班后就很少有时间静下心来看东西,Google reader里的订阅更是过了千记,而从前这个数字从来没有超过10。感觉自己有点落伍啊~赶紧加把劲才是。最后感谢colin,我写下此文,给你一个清晰答案的同时,也是给其他需要这个答案的人、更是给我自己一个清晰的答案:)


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。