CSS 視覺格式化模型(visual formatting model)是用來處理文檔并將它顯示在視覺媒體上的機制。這是 CSS 的一個基礎概念。 視覺格式化模型根據 CSS 盒模型為文檔的每個元素生成 0，1 或多個盒。每個盒的布局由如下內容組成：

（1）盒尺寸：明確指定，受限或沒有指定
（2）盒類型：行內(inline), 行內級別(inline-level), 原子行內級別(atomic inline-level), 塊(block)盒；
（3）定位方案(positioning scheme): 常規流，浮動或絕對定位；
（4）樹中的其它元素: 它的子代與同代；
（5）視口(viewport) 尺寸與位置；
（6）內含圖片的固定尺寸；
（7）其它信息。
一個盒相對于它的包含塊(containing block) 的邊界來渲染。通常盒為它的后代元素建立包含塊。注意盒并不受它的包含塊的限制，當它的布局跑到包含塊的外面時稱為溢出(overflow)。

視口 Viewport
在連續媒介上工作的用戶代理通常會向用戶提供一個視口（屏幕上的一個窗口或其它可視區域），用戶可以通過它來訪問文檔。用戶代理可以在視口被調整大小時改變文檔的布局（詳見初始包含塊）。

如果視口小于渲染文檔的畫布區域，用戶代理應當提供一個滾動機制。每個畫布最多可擁有一個視口，但用戶代理可以把文檔渲染至多個畫布上（即為相同文檔提供不同的視圖）。

包含塊 Containing blocks
在CSS 2.1中，許多框的位置和大小都根據一個名為包含塊的矩形框邊緣來相對計算得到。為元素生成的框通常會充當其后裔框的包含塊；我們稱框為其后裔“創建”（establishes）了包含塊。“框的包含塊”表示“框所處的包含塊”，而不是其產生的包含塊。

每個框會被給予一個相對于其包含塊的位置，但它不會被局限在其包含塊內；它有可能會溢出。

盒的生成(Box generation)
CSS 視覺格式化模型的一部分工作是從文檔元素生成盒。生成的盒擁有不同類型，并對視覺格式化模型的處理產生影響。生成盒的類型取決于 CSS 屬性 display

塊級元素與塊盒(Block-level elements and block boxes)

當元素的 CSS 屬性  display 為 block, list-item 或 table 時，它是塊級元素 block-level 。塊級元素（比如<p>)視覺上呈現為塊，豎直排列。

塊級盒參與(塊格式化上下文 block formatting context)。每個塊級元素至少生成一個塊級盒，稱為主要塊級盒(principal block-level box)。一些元素，比如<li>，生成額外的盒來放置項目符號，不過多數元素只生成一個主要塊級盒。

主要塊級盒將包含后代元素生成的盒以及生成的內容。它也是可以使用(定位方案 positioning scheme)的盒。

venn_blocks.png一個塊級盒可能也是一個塊容器盒。塊容器盒(block container box) 只包含其它塊級盒，或生成一個行內格式化上下文(inline formatting context)，由此只包含行內盒。注意塊級盒與塊容器盒概念不同。 前者描述元素跟它的父元素與兄弟元素之間的表現，后者描述元素跟它的后代之間的影響。有些塊級盒，比如表格，不是塊容器盒。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。