可视类型的媒体可以根据CSS的视觉格式模型规则处理文档树中的元素，从而将（x）HTML转化为制作者设计的外观。
例如:
如何生成元素框架；
处理元素之间的关系；
根据框架的大小、位置等CSS属性来确定元素的位置等。
因此，为了掌握使用CSS来控制页面中的元素的技巧，我们需要了解框架模型（框模型）和可视化格式化模型的原理。
文档树中的元素生成矩形框（框），这将影响元素之间的距离、元素的位置、背景图片的位置等。
视觉格式模型有布局（布局）这一概念，而页面设计通常使用类似的3行2列、3行3列的布局；不同视觉格式模型的概念在布局；指的是如何显示每个元素。
在CSS 2.1中，控制框的布局可以基于三个定位方案：
在CSS 2.1中，例程流到包含块框、行内格式化、块或行帧的相对位置和插入框的位置的块格式。
浮 u3002in浮动模型，一盒先流出的小溪，向左或向右移动尽可能按照正规的流动方向。内容可以安排在一个浮动的边缘。
绝对定位：在绝对定位模型中，一个盒子与传统的流动方向完全分离（它对以下的兄弟会没有影响），并且位置是根据包含块来分配的。
在理解视觉形式，概念是明确的：包含块（包含块）是可视化格式模型的一个重要概念，它也可以被理解为一个矩形，矩形的作用是因为它含有元素提供一个参考，的大小和元素的位置计算是元素包含块的决定。
框架模型（Box模型，也被翻译为盒子模型）是CSS的一个非常重要的概念，也是一个相对抽象的概念。
文档树中的元素生成矩形框（框），这将影响元素之间的距离、元素的位置、背景图片的位置等。
因此，掌握CSS布局技术，需要了解框架模型的原理和可视化的格式化模型。
浏览器中显示的元素可以看作是带有对象的矩形框。这些长方形的盒子是嵌套的、堆叠的或捆绑在一起形成页面的。
提示：箱model常译成盒模型；；但盒子有厚度，也就是说，这个盒子是立体的，且镜框不厚。它是二维的。因此，本书采用了盒子模型和这种翻译方法。
图1显示了每个元素的框架（框），由几个部分组成：
内容（内容）
例如，文本、图片或其他元素也可以被视为矩形框。宽度（宽度）和高度（高度）的2个CSS属性被设置为内容框的宽度和高度。
边境（边境）
边框（也称为边界）可以具体显示，并且可以设置宽度、外观样式和颜色。
填料（填料）
填充物（也可译为填充、填充、补片）在内容框架和框架距离部分之间，显示填充的背景。
保证金（保证金）
边缘（也称为边白、外边缘、外部补片等）是边界以外的透明区域，用于设置元素与其他元素之间的距离。
在上、右、下、左方向上具有四个方向的边的一种元素框架，如图2所示。
从图2, 1中可以看出，该区域的元素实际上是由几个矩形框架元素组成的：内容框架、框架、填充元素的形成和框框边距的形成：
元素内容框的边缘被称为内容边缘（内容边缘）或内部边缘（内部边缘）；4个内容边缘形成内容框（内容框）内容；
箱体的外缘形成填料，称为补（填料边）白边，箱边有白边；补强填料。如果填料宽度为0，则填充白边和边含量重叠。4填充白色填料；（填料箱）填料；。
边框所形成的边框的外缘称为边框（边框边缘），边框宽度为0，边框边缘与白边重叠，4边框形成边框边框（边框框）；。
边框所形成的边框的外缘称为边缘边缘（边缘边缘）或外部（外缘）边框周围的边缘，如果边缘宽度为0，边框边缘和边框边缘重合，4边缘边缘形成边缘框（边缘框）；
内容框（宽度和高度）的大小取决于许多因素，如：
宽度属性或高度属性是否由生成该框的元素设置；
框是否包含文本或其他帧；
这个盒子是一张桌子等等。
例如，下面的代码（查看一个实例）它的内容框和框之间的关系，如图3所示，如图4所示。
CSS代码将内容复制到剪贴板。
* { margin: 0；padding: 0；颜色：# 666；} / * * /删除浏览器的默认样式
div {边界：4px固体# F90；背景：# FC6；}
UL {列表样式：无；缘：10px；padding: 10px；背景：# FC6；}
李{填充：10px 0 10px 10px；背景：# ff9；保证金：15px；}
右：0。样本{保证金；边界：5px冲# F90；}
示例文本，例如第一个文本中的文本
第二李内部的示例文本
DIV在UL
从图3和图4中我们可以发现：
帧宽度=左元素距离（左边框）+左边框宽度（左边框宽度）+左填充（左填充）+内容宽度（宽度）+右填充（右填充）+右边框宽度（边框右侧宽度）+右边距（边距右侧）
框架元素高度=顶部边距（边距顶部）+（边框顶部宽度）+边框宽度填充（填充顶部）+内容高度（高度）+填充（填充底部）+（边框底部宽度）+边框宽（边距底部）
提示：对于垂直方向的边缘重叠的情况下，在这一章中看到的{ 8.9.2.2边缘重叠。
在IE 5.5和早期版本中，在IE 6 7中的怪异模式中，框架模型被错误地理解为：
宽度=左边框+左填充+内容宽度+填充右边框+右边框
高度=边框顶部+填充顶部+内容高度+填充底部+边框底部
也就是说，错误的框架模型理解边框和边框的宽度和高度，而不是内容框（当然，很多人认为这个设置更容易计算布局的大小）。
例如，下面的代码：
xml代码将内容复制到剪贴板。
div {宽度：300px；保证金：10px；padding: 15px；边界：5px固体# CCC；}
对div框的宽度应360px（10px + 5px + 15px + + + + 300px 15px 5px 10px），而在IE的错误框模式，框的宽度是320px（+ +），和实际内容的宽度*（* *）。
因此，元素的大小可以被证明是不正确的。
提示：在CSS 3中，生产者可以使用盒子大小属性在内容框或边框框中指定宽度和高度的值。
