可视化格式模型(visual formatting model)

标签：

　　对于可视化格式模型这个概念，官方的原话是这样的：How use agents process the document tree for visual media。翻译过来就是用户端在媒介中如何处理文档树。用户端这个对于我们来说通常指的就是浏览器。媒介呢，就是展示页面的介质，比如显示器。文档树呢，就是源文档中元素树的编码。树中，每一个元素恰好有一个父元素，当然除了根元素。

一.框的布局影响因素

　　可视化格式模型中，每一个文档树中得元素都会根据box module（盒模型）来产生零个或多个控制框。这些框的布局由下列内容控制：

• 框的尺寸和类型
• 定位体系（包括normal flow、floats与absolute positioning）
• 文档树中元素间的关系
• 外部信息（如视图的大小，图形的内在尺寸等）

1.框的尺寸和类型

　　框的类型指的是dispaly特性所决定的元素类型，这个特性会使元素产生相应的控制框。

2.定位体系

　　主要是常规流、浮动与绝对定位。

3.文档树中元素间的关系　　　

　　比如两个互为兄弟节点的浮动元素，前面的浮动元素会影响到后面浮动元素的布局。

4.外部信息　　

　　比如自适应页面，窗口的大小对布局有影响。图片的固有尺寸会影响行内替换元素的尺寸。

二.视图

　　viewport，我这里译做视图，也有叫视点、视口的，其实据是可是窗口。

　　当可视窗口的尺寸大小改变时，浏览器应该改变文档的布局。 比如，有些值依赖于可视窗口的大小，DIV ‘width‘ 的 "auto" 值，等等。

　　当可视窗口的尺寸小于文档渲染的画布（也就是页面）的大小时，浏览器应该提供滚动机制。 每个画布最多有一个可视窗口。但是，浏览器可以同时渲染多个画布。

三.包含块

　　CSS2中，很多框的位置和尺寸的计算都基于一个被称为包含块的长方形盒子的四边。通常地，生成的框表现为其派生框的包含块；我们说一个框“建立”了它的派生框的包含块。短语“一个框的包含块”意味着“该框所存在的那个包含块”，而不是它所生成的块。

基于框的包含块，每一个框都有一个定位，不过它不被包含块所限制；它可能溢出。

    文档树的根生成一个框，作为后继布局的初始包含块。

    初始包含块的宽度可以由根元素的width属性指定。如果该属性取值为‘auto‘，用户端提供初始宽度（如，用户端使用视图的当前宽度）。

    初始包含块的高度可以由根元素的height属性指定。如果该属性取值为‘auto‘，包含块的高度将调整以适应文档内容。

    初始包含块不可以被定位或浮动（即，用户端忽略根元素的position和float属性）。

    包含块尺寸如何计算的细节的描述会在以后提到。

四.总结

　　可视化格式模型这一篇主要还是一些基本的概念，让大家了解下到底什么是可视化格式模型，后面会详情分析下可视化格式模型中比较核心的概念。

参考资料：

　　1.可视化格式模型。http://kaix.in/daddy/old/very/css/visuren.html

　　2.http://www.w3.org/TR/CSS2/visuren.html

　　3.http://w3help.org/zh-cn/kb/007/

可视化格式模型(visual formatting model)

标签：

原文地址：http://www.cnblogs.com/rexD/p/4483466.html