CSS视觉格式化模型（visual formatting model）是用来处理文档并将它显示在视觉媒体上的机制。这是CSS 2.1的一个基础概念。视觉格式化模型根据CSS盒模型为文档的每个元素生成0，1或多个盒。每个盒的布局由如下内容组成：
- 盒尺寸：明确指定，受限或没有指定
- 盒类型：块级盒（block-level box），行内级别盒（inline-level box），行内盒（inline-box)，原子行内级别盒（atomic inline-level box）
- 定位方案（position scheme）：常规流（normal flow），浮动或绝对定位（包括absolute和fixed）
- 文档树中的其他元素：它的子节点与兄弟节点
- 视口（viewport）的尺寸与位置：屏幕上的一个窗口或其他可视化区域
- 内含图片的固定尺寸
- 其他信息
一个盒子相对于它的包含块（containing block）的边界来渲染。通常盒为它的后代元素建立包含块。但是盒并不受它的包含块的限制，当它的布局跑到包含块的外面时，称为溢出（overflow）。
注：包含块（containing block）定义和块容器盒（block container box）概念不同。
盒的生成（Box generation）
CSS视觉格式化模型的一部分工作是从文档元素生成盒。生成的盒拥有不同的类型，并影响视觉格式化模型本身。生成盒的类型取决于CSS属性display。
1、块级元素与块盒（Block-level elements and block boxes）
块级元素（block-level elements）：display为block，list-item，table
块级盒（block-level-box）：块级盒参与块级格式化上下文（block formatting context）。每个块级元素至少生成一个块级盒，称为主要块级盒（principal block-level box）。一些元素，如
块容器盒（block-container box）：块级盒中除了table box和可替换元素之外，均是块容器盒。其他的块级盒不是块容器盒，如不可替换的行内块和不可替换的table cell。块容器盒要么只包含块级盒（table box和可替换元素除外），要么生成一个行内格式化上下文（inline formatting context，只包含行内盒，如inline-block）。
块盒（block boxes）：既是块级盒，又是块容器盒的盒是块盒。
块级盒和块容器盒对比：块级盒描述元素跟它的父元素与兄弟元素之间的关系。块容器盒描述元素跟它的后代之间的影响。
术语：
元素：元素是文档结构的基础，在CSS里面，每个元素生成了包含内容的盒（box）。
可替换元素：浏览器根据其标签的元素与属性来判断显示具体的内容，CSS渲染模型不考虑替换元素内容的渲染，这些替换元素的展现独立于CSS。比如： type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样。(X)HTML中的、、