学习可视化格式模式-简介

发表于   |  

前言

好久没写东西了，最近太懒了。最近在微博上看了一副学习金字塔，从图中可以看出学习效率最低的就是”听讲”和”阅读”，最高的就是“教别人”和“马上应用”，高中就从这条定律中受益匪浅，为啥上了大学就成口头上的巨人，行动上的矮人了，要强迫改变自己了！

下面就总结下这段时间看的一个知识点——CSS的可视化格式模式（visual formattin model）

资源

  • 说说标准系列

    无意中发现的好资料，这次学习也从这系列博客看起的，看完后收获很多，建议大家阅读。后面我的内容也算是对这系列文章的整理，加深自己的印象。

  • W3C–Visual formatting model

    无需多言只要学习标准离不开W3C文档。

可视化格式模型简介

那么，什么是可视化格式模型呢？看看官方的定义

How uers agents process the document tree for visual media

对于可视的媒介，用户代理怎样处理文档树。这里有几个概念需要搞明白。

  • 用户代理（User Agent）：一般指浏览器，它的信息包括硬件平台、系统软件、应用软件和用户个人偏好。后面所说的浏览器就是指用户代理。
  • 媒介（media）：展示页面的介质，包括显示器，纸，听觉浏览器和打印机等等
  • 文档树（document tree）:指源文档中元素树的编码。每一个元素都只有一个父节点，根节点除外，它没有父节点。

在可视化格式模型中，根据box模型，在文档树中的每个元素产生0个或多个box，这些box的布局受下面因素影响：

  • box的尺寸和类型：box的尺寸就是盒子模型中的margin、border、padding和content，box的类型就是display的值。
  • 定位体系：有三种定位体系分别是，常规流(normal flow)、浮动(float)和绝对定位(absolute positioning)。
  • 文档树中元素之间的关系。
  • 额外的信息（比如，视窗(viewport)大小，图片的原始尺寸）

这部分定义的特性，适用于continuous media和pages media。当然，当用于paged media时，margin的属性的意义有所变化。（详情查看page model）。

可视化模型不会指定格式的所有细节（比如它没有指定字间距算法）。用户端的一致性(conforming user agents)在处理本规范未包含的格式化情形时，表现可能有所不同。

视窗（viewport）

对于连续的媒介，浏览器通常提供给用户提供一个视窗（在屏幕上的一个窗口或者其他可视区域），通过它用户可以查阅文旦。当视窗大小尺寸被改变时，用户代理可能会改变文档的布局（详情查看initial containing block）。

当视窗小于文档渲染的画布的大小时，浏览器应该提供一个滚动机制。每个画布最多有一个可视窗口，但是用户代理可能渲染多个画布。（也就是说，浏览器可以打开多个页面，但是每个页面最多只有一个可视窗口）。

包含块(Containing blocks)

在CSS2.1中，很多box的定位和尺寸的计算，取决于一个矩形框的边界，这个矩形就叫做containing block 。一般来说，（元素）生成的box会当作它子孙元素的包含块，我们称之为“一个（元素的）box为它的子孙元素建造了包含块” 。“一个（元素的）box的包含块”意思是“该box所存在的那个包含块”，不是它产生的包含块。包含块是一个相对的概念
比如：

1
<div>
    <table>
        <tr><td>hi</td></tr>
    </table>
</div>

这个例子中，div和table都是包含块。div是table的包含块，同时table又是td的包含块，不是绝对的。这里table的包含块说的是div建造的包含块，而不是table自身建造的包含块。

每个box关于它的包含块都给定了一个位置，但是不会被它的包含块限制，可以从包含块溢出。设置overflow属性可以处理溢出的子孙元素。

1
2
3
<div id="A" style="width:100px; height:100px; border:1px solid red;">
    <div id="B" style="width:200px; height:200px; background-color:gold;">hello</div>
</div>

这段代码中A是B的包含块，B的定位跟A有关，B的大小大于A的大小，这时候，B会溢出，而A不能限制B的大小。注意这段代码是有兼容性的问题，见：【分享】小心，IE中width/height的设定值可能被其内容撑大

包含块的概念很重要，因为可视化格式模型中很多的理论性知识都跟这个概念有关系。比如，宽度和高度自动值的计算，浮动元素的定位，绝对定位元素的定位等等。不了解包含块，就掌握不好以它为基础的后续理论。