在可视化格式模型里，每个元素都是由一个或者多个盒子组成，这些盒子的布局由下面规则控制：
- box dimensions and type.（块元素和行内元素）
- positioning scheme (normal flow, float, and absolute positioning).
- relationships between elements in the document tree.
- external information (e.g., viewport size, intrinsic dimensions of images, etc.).
可视化格式模型的官方说法是，它规定了用户端在媒介中如何处理文档树( document tree )。以下是对其中关键词的解释：
用户端：对我们来说一般指浏览器。
媒介：展现页面的介质。例如，纸媒介，听觉浏览器和显示器等3。
文档树( document tree )：源文档中元素树的编码。树中，每一个元素恰好由一个父元素。根元素是例外，它没有父元素。就是 document 和页面上的元素所构成的类似树形的结构。
可视化格式模型，不会规定所有格式的细节（比如，它并不是指字间距）。
如果一个块元素容器盒子里面包含了一个块水平（block-level box）的盒子，会强迫该容器里面的所有盒子都成为块水平
<DIV>
Some text //这里产生了一个匿名块水平盒子
<P>More text</P>
</DIV>
如果一个行内元素盒子里包含了块水平盒子，那么该容器会被打破：
<body>
<span>aa //这里产生了一个匿名块水平盒子<p>bb</p>cc //这里产生了一个匿名块水平盒子</span>
</body>
结果是一个body 块水平盒子里包含了两个匿名块水平盒子和一个p标签的块水平盒子
匿名盒子会继承容器的部分属性，例如上面例子给span加上一个边框
匿名盒子不会被相对单位作为参照物，例如
<div>
"
<div style="width: 30%;"> </div> //这个时候不会以父元素匿名盒子来计算，而是以上面的非匿名块水平盒子作为参照计算
"
</div>
块元素内不被行内元素包裹的文字会产生匿名行内盒子
<p>
aa //由p产生匿名行内盒子，空格不会产生匿名行内盒子
<em>bb<em>
cc
</p>
浮动元素，决定定位元素和相对根元素被称为out of flow，其余元素被称之为in flow ，根元素相对而言，例如：
<p>
<a><span></span></a>
</p>
p元素是不在这个结构的flow里面的