视觉格式化模型

CSS 视觉格式化模型(visual formattingmodel)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个核心的概念。 视觉格式化模型根据 CSS 盒模型为文档的每个元素生成 0，1 或多个盒。

每个盒的布局由下列内容组成：

盒尺寸：明确指定，受限或没有指定

盒类型：行内(inline), 行内级别(inline-level), 原子行内级别(atomic inline-level), 块(block)盒；

定位方案(positioning scheme): 常规流，浮动或绝对定位；

树中的其它元素: 它的子代与同代；

视口(viewport) 尺寸与位置；

内含图片的固定尺寸；

其它信息。

当元素的 CSS 属性 display 为 block, list-item 或 table 时，它是块级元素 block-level。块级元素（比如

)视觉上呈现为块，竖直排列。

每个块级元素至少生成一个块级盒，称为主要块级盒(principal block-level box)。主要块级盒将包含后代元素生成的盒以及生成的内容。一些元素，比如

，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。

块级盒模型是CSS中最重要的一个概念，定义了块级元素如何显示以及如何交互。

网页中的每个元素都可以被看成是一个矩形区域，这个矩形区域由内容(content)、填充(padding)、边框(border)、边界(margin)组成，盒子模型的结构如下图所示：

图中包括蓝色区域在内的整个范围是网页块级元素的大小。内边距是内容和边框之间的空间，内边距包裹内容区域，如果在元素上添加背景，则背景会应用于由内容和内边距共同组成的范围。修改内边距、边框和外边距不会影响内容区域的范围，但是会改变元素整体的大小。

内边距、边框和外边距可以对应于一个元素的上、右、下、左进行分别定义，也可以简单的对四个位置同时定义。外边距可以设置为负值，可以应用在很多种特殊场合。内边距、边框和外边距的设置是可选的，默认值一般为零，但是不同的浏览器的默认值会有所区别，可以在定义页面样式之前首先对元素的margin和padding等进行初始化：

* {

margin: 0;

padding: 0;

}