在css中，一切都是框。div、h1 或 p 元素常常被稱為塊級元素，意味著這些元素顯示為一塊內容，呈現出的是乙個個塊框。與之相反，span 和 strong 等元素稱為行內元素，這是因為它們的內容會被顯示在一行中，呈現出的是乙個個行內框。視覺化格式模型解釋的就是，怎樣把這些框，按照一定規則擺放在頁面上。
1. 控制框
（1） 塊級元素和塊框
塊級元素是源文件中那些在視覺上被格式化為塊（如：段落）的元素。塊元素會生成塊框，塊框裡面包含有內容和該塊的子元素，同時塊框參與到塊格式化上下文的定位中（具體見css定位之常規流一文）。除了**框及替換元素（如
但是，並不是所有塊包含框都是塊框，像是inline-block元素也生成了乙個塊包含框，但它並不是乙個塊框，它參與的是行內格式化上下文中。除了一些明確的塊級元素div、p等，某些display屬性的取值也會產生塊框：
匿名塊框是指，當乙個塊框裡包含另乙個塊框時，我們強迫這個塊框裡頭只包含塊框或插入框，所以任何行內框都會被包含在乙個匿名塊框內，以達到這一目的。
css specification中的例子如下，
div元素中既有行內元素又有塊元素，那麼在行內元素上就會有乙個匿名的塊框。
（2）行內元素和行內框
行內元素（a、em、strong等）會生成行內框。某些display屬性的取值也會形成行內框：
匿名行內框是指乙個塊級元素產生的、與任何行內元素無關的行內框。
css specification中的例子如下，
some emphasized text
這樣的行內框從其父塊框那裡繼承可以繼承的屬性。非繼承屬性取它們的初始值。
2. 包含塊
乙個元素的定位和尺寸計算，有時候會跟某一矩形框有關，即該元素的包含塊。包含塊的定義如下：
如果該祖先元素是乙個行內元素，且其direction：ltr，則包含塊的頂、左邊是祖先元素中第乙個行內框的頂、左邊界 ，右、下邊是祖先元素中最後乙個行內框的右、下邊界 。如果該祖先元素是乙個行內元素，且其direction：rtl，則包含塊的頂、右邊是祖先元素中第乙個行內框的頂、右邊界 ，左、下邊是祖先元素中最後乙個行內框的左、下邊界 。
t
這段文字從左向右排列，紅 x 和 藍 x 和黃 x 藍 x 都是絕對定位元素，用來判斷它們包含塊的邊緣。
***x
上述例子在firefox中的效果：
在chrome中的效果：
3. 定位方案
CSS3 視覺化的格式模型
在這個模型裡，文件樹上的每乙個元素都會生成零個，乙個或者多個盒子 根據盒子模型 這些盒子的布局由以下內容決定 本章和下一章定義的屬性同樣適用於連續類 continuous media 和頁面類 paged media 當然，對於頁面類 來說，margin屬性有些不一樣。視覺化格式模型沒有指定關於格式...
精通CSS 第2章 視覺化格式模型
第2章 為樣式找到應用目標 選擇器 常用選擇器 1 類選擇器 2 後代選擇器 第三章 視覺化格式模型 3個最重要的css概念是浮動 定位 盒模型,這些概念控制在頁面上安排和顯示元素的方式 3.1 盒模型概述 外邊距疊加 外邊距 當二個或更多垂直外邊距相遇時，它們將形成乙個外邊距。這個外邊距的高度等於...
ccs框模型與視覺化格式模型
視覺化格式模型 margin對於table相關型別 除了table caption,table,inline table這3類 的元素是不起作用的，如td,tr,th等。另外對於行內非替換元素 如span元素 垂直方向的margin是不起作用的。padding屬性也有一定的限制，它可以使用在除dis...