基本概念
概述
视觉格式化模型：用户代理
User Agent如何在视觉媒体Visual Media下处理文档树Document Tree。视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：
盒子的尺寸：精确指定、由约束条件指定或没有指定
盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）
定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位
文档树中的其它元素：即当前盒子的子元素或兄弟元素
视口尺寸与位置
所包含的图片的尺寸
其他的某些外部因素
视口 The Viewport
在连续媒体
Continuous Media上工作的用户代理一般会向用户提供一个视口（屏幕上的一个窗口或其它可视区域）来帮助用户访问文档。用户代理可以在调整视口大小的同时改变文档的布局（见初始包含块Initial Containing Block）。如果视口小于渲染文档的画布区域，用户代理应提供一个滚动机制。每个画布最多有一个视口，但用户代理可以把文档渲染到多个画布上（即为相同文档提供不同视图）。
包含块 Containing Blocks
CSS2.1中，许多盒的定位和大小都根据一个名为包含块
Containing Block的矩形盒的边缘来计算。一般地：
生成的盒会充当其后代盒的包含块；
我们称盒为其后代“创建”了包含块。
说“盒的包含块”即是说“盒所处的包含块”，而不是盒所产生的包含块。
每个盒会被赋予一个相对于其包含块的位置，但它不会被局限在其包含块内；它有可能溢出。
包含块的尺寸如何计算的细节将在下章讲述。
“根元素”的包含块（初始包含块）由用户代理定义（浏览器）。在HTML中，根元素就是html元素，（部分浏览器根元素是body）。在大多数浏览器中，初始包含块是一个视窗大小的矩形（不等同于视窗，只是大小相等）
对于非根元素，如果position值是relative或者static，包含块则是最近的块级框。或者：表单元格或行内块祖先框的内容边界
对于非根元素，如果position值是absolute，包含块为最近的position值不是static的祖先元素（可以是任何类型）。具体过程如下：
如果这个祖先元素是块元素，包含块则设置为该元素的内边距边界；换句话说，就是由边框界定的区域
如果没有祖先元素，或者所有的祖先元素都没有开启定位，元素的包含块定义为初始包含块
对于定位的元素：只是包含块的边界与父元素的边框相同，但是因为left、top的默认值是auto，所以不影响padding对子元素的作用，设置了padding之后子元素并不会黏在父元素的边框上
可替换元素和不可替换元素
从元素本身的特点来讲，可以分为可替换元素(replaceable element)和不可替换元素(none-replaceable element)。
可替换元素
在 CSS中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如