CSS核心:框模型与视觉格式化模型[2010年7月16日更新:包含块]

视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素,从而将(X)HTML转化成制作者设计的样子。

例如:

  • 如何生成元素框;
  • 处理各元素之间的关系;
  • 根据框的尺寸、定位等CSS属性来确定元素的位置等;

因此,要掌握使用CSS控制页面内元素的技巧,就需要深入了解框模型(Box Model)视觉格式化模型的原理。

文档树中的元素都产生矩形的框(Box),这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型(Visual formatting model)来将这些框布局成访问者看到的样子。

我曾在《别具光芒:CSS属性、浏览器兼容与网页布局》一书中,讲解过这些概念,但是很多读者反映内容比较晦涩难懂,这也是让我很困扰的一件事情。因为这些是CSS手册中最抽象的概念,有时候为了准确翻译手册的定义,可能会使得语句很拗口。

同时,由于出版社对于措辞的要求,让一些句子也变得不那么“平易近人”。

所以,我再次重新尝试,把这部分内容重新来编排一下,看看是否能把这些重要的内容讲得更易懂一些。

本文会随着内容的增加而不断更新,希望大家仔细阅读,并提出意见和建议。

视觉格式化模型中也有“布局(layout)”的概念,但是这个与页面设计经常用到的类似“3行2列”或者“3行3列”中的“排版布局”的概念不同,视觉格式化模型中的“布局”是指每个元素该如何来显示。

CSS 2.1中,一个控制框的布局可以根据三种定位方案:

  1. 常规流向。CSS 2.1中,常规流向包含块框的块格式化,行内框的行内格式化,块框或行内框的相对定位,以及插入框的定位。
  2. 浮动。在浮动模型中,一个框首先根据常规流向布局,再将它从流中取出并尽可能地向左或向右偏移。内容可以排列在一个浮动的边上。
  3. 绝对定位。在绝对定位模型中,一个框整个地从常规流向中脱离(它对后续的兄弟元素没有影响),并根据包含块来分配其定位。

在理解视觉格式化的概念之前,要明确一点:包含块(Containing Block)是视觉格式化模型的一个重要概念,它也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

【未完待续……】

CSS核心:框模型与视觉格式化模型[2010年7月16日更新:包含块]》有 3 条评论

  1. 笨蛋说道:

    占沙发,坐下慢慢看

  2. hello说道:

    您好!《CSS属性、浏览器兼容与网页布局》这本书会出第二版吗?

    貓回复:第一版都沒賣完,咋會出第二版涅~~~

  3. august说道:

    I like you for a long time~

发表评论

电子邮件地址不会被公开。 必填项已用*标注