視覺類型的媒體根據CSS的視覺格式化模型（Visual formatting model）的規則來處理文檔樹中的元素，從而將(X)HTML轉化成制作者設計的樣子。

例如：

如何生成元素框；
處理各元素之間的關系；
根據框的尺寸、定位等CSS屬性來確定元素的位置等；
因此，要掌握使用CSS控制頁面內元素的技巧，就需要深入了解框模型（Box Model）及視覺格式化模型的原理。

文檔樹中的元素都產生矩形的框（Box），這些框影響了元素內容之間的距離、元素內容的位置、背景圖片的位置等等。而瀏覽器根據視覺格式化模型（Visual formatting model）來將這些框布局成訪問者看到的樣子。

視覺格式化模型中也有“布局（layout）”的概念，但是這個與頁面設計經常用到的類似“3行2列”或者“3行3列”中的“排版布局”的概念不同，視覺格式化模型中的“布局”是指每個元素該如何來顯示。

CSS 2.1中，一個控制框的布局可以根據三種定位方案：

常規流向。CSS 2.1中，常規流向包含塊框的塊格式化，行內框的行內格式化，塊框或行內框的相對定位，以及插入框的定位。
浮動。在浮動模型中，一個框首先根據常規流向布局，再將它從流中取出并盡可能地向左或向右偏移。內容可以排列在一個浮動的邊上。
絕對定位。在絕對定位模型中，一個框整個地從常規流向中脫離（它對后續的兄弟元素沒有影響），并根據包含塊來分配其定位。
在理解視覺格式化的概念之前，要明確一點：包含塊（Containing Block）是視覺格式化模型的一個重要概念，它也可以理解為一個矩形，而這個矩形的作用是為它里面包含的元素提供一個參考，元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。

框模型（Box model，也譯作“盒模型”）是CSS非常重要的概念，也是比較抽象的概念。

文檔樹中的元素都產生矩形的框（Box），這些框影響了元素內容之間的距離、元素內容的位置、背景圖片的位置等等。而瀏覽器根據視覺格式化模型（Visual formatting model）來將這些框布局成訪問者看到的樣子。

因此，要掌握使用CSS布局的技巧，就需要深入了解框模型和視覺格式化模型的原理。

瀏覽器內顯示的元素都可以看作是一個裝了東西的矩形的盒子，這些矩形的盒子嵌套、疊加或者并列在一起，形成了頁面。

提示：“box model”往往被譯為“盒模型”。但是盒子是具有厚度的，也就是說盒子是三維的，而框則沒有厚度，是二維的，因此本書采用了“框模型”這個譯法。

圖1顯示了每一個元素的“框（Box）”由幾部分組成：