在css中，一切都是框。div、h1 或 p 元素常常被稱為塊級元素，意味着這些元素顯示為一塊内容，呈現出的是一個個塊框。與之相反，span 和 strong 等元素稱為行内元素，這是因為它們的内容會被顯示在一行中，呈現出的是一個個行内框。可視化格式模型解釋的就是，怎樣把這些框，按照一定規則擺放在頁面上。
1. 控制框
（1） 塊級元素和塊框
塊級元素是源文檔中那些在視覺上被格式化為塊（如：段落）的元素。塊元素會生成塊框，塊框裡面包含有内容和該塊的子元素，同時塊框參與到塊格式化上下文的定位中（具體見CSS定位之正常流一文）。除了表格框及替換元素（如<img>，元素的内容會由其url指定的圖檔所替換）,塊框同時也是一個塊包含框。一個塊包含框中要麼隻包含塊級框，要麼建立出一個行内格式化上下文（具體見CSS定位之正常流一文）。如果其中既有塊元素又有行内元素，那麼會預設生成匿名的塊框來達到這一要求，下面有具體例子說明。
但是，并不是所有塊包含框都是塊框，像是inline-block元素也生成了一個塊包含框，但它并不是一個塊框，它參與的是行内格式化上下文中。
除了一些明确的塊級元素div、p等，某些display屬性的取值也會産生塊框：
- block：該值使一個元素生成一個塊框。
- list-item：該值使一個元素（如HTML中的LI）生成一個原始塊框和一個清單項行内框。
- table：使一個元素表現為類似一個表格元素.
匿名塊框是指，當一個塊框裡包含另一個塊框時，我們強迫這個塊框裡頭隻包含塊框或插入框，是以任何行内框都會被包含在一個匿名塊框内，以達到這一目的。
css specification中的例子如下，
<DIV>
Some text
<P>More text
</DIV> 
div元素中既有行内元素又有塊元素，那麼在行内元素上就會有一個匿名的塊框。
（2）行内元素和行内框
行内元素（a、em、strong等）會生成行内框。某些display屬性的取值也會形成行内框：
- inline : 該值使一個元素生成一個或多個行内框。
- inline-block：該值使一個元素生成一個塊框，但其自身在文檔流中像一個行内元素，跟替換元素相似。元素的内部按照塊框布局，自身按照一個行内替換元素格布局。
- inline-table : 使一個元素表現為類似一個表格元素
匿名行内框是指一個塊級元素産生的、與任何行内元素無關的行内框。
css specification中的例子如下，
<P>Some <EM>emphasized</em> text</P>
p元素生成一個塊控制框，其内還有幾個行内框。"emphasized"的框是一個行内元素（<em>）産生的行内框，而其它的框（"Some"和"text"）是塊級元素（P）産生的行内框。後者就稱為匿名行内控制框。
這樣的行内框從其父塊框那裡繼承可以繼承的屬性。非繼承屬性取它們的初始值。
2. 包含塊
一個元素的定位和尺寸計算，有時候會跟某一矩形框有關，即該元素的包含塊。包含塊的定義如下：
- 根元素存在的包含塊，成為初始包含塊 (initial containing block)。
- position：static和position：relative定位的元素，包含塊是離它最近的塊級祖先元素的内容框（padding内的框）。
- position：fixed定位的元素，包含塊是目前可視視窗。
- position：absolute定位的元素，包含塊由離它最近的 position 屬性為 “absolute”、“relative” 或者 “fixed” 的祖先元素建立：
- 如果該祖先元素是一個行内元素，且其direction：ltr，則包含塊的頂、左邊是祖先元素中第一個行内框的頂、左邊界 ，右、下邊是祖先元素中最後一個行内框的右、下邊界 。
- 如果該祖先元素是一個行内元素，且其direction：rtl，則包含塊的頂、右邊是祖先元素中第一個行内框的頂、右邊界 ，左、下邊是祖先元素中最後一個行内框的左、下邊界 。
<html>
<head>
<style type="text/css">
p {font-size:20px;width:200px; padding:20px;line-height:50px;}
span {background-color:#C0C0C0; position:relative;}
em#lt {position:absolute; color:red; top:0; left:0;}
em#rt {position:absolute; color:yellow; top:0; right:0;}
em#lb {position:absolute; color:blue; bottom:0; left:0;}
em#rb {position:absolute; color:green; bottom:0; right:0;}
</style>
</head>
<body>
<p>
T
<span>
這段文字從左向右排列，紅 X 和 藍 X 和黃 X 藍 X 都是絕對定位元素，用來判斷它們包含塊的邊緣。
<em id='lt'>X</em>
<em id='rt'>X</em>
<em id='lb'>X</em>
<em id='rb'>X</em>
</span>
</p>
</body>
</html>
行内元素内形成的包含塊，在各浏覽器中各不相同，存在相容性問題。
上述例子在firefox中的效果：
在chrome中的效果：
- 其他情況下，如果祖先元素不是行内元素，那麼包含塊的區域應該是祖先元素的内邊距邊padding edge（注意與第二條中中内容區content edge的差別）。
<html>
<head>
<style type="text/css">
div#container {margin:10px; padding:10px; border:1px solid; background-color:#c0c0c0; position:relative; width:200px; height:100px;}
div#content{border:1px solid red; position:absolute; left:0; top:0;}
</style>
</head>
<body>
<div id='container'>
<div id='content'>absolute element</div>
</div>
</body>
</html>
3. 定位方案
css可視化格式模型中共有三種定位方案，分别是：正常流定位、浮動和絕對定位。後面的文章将分别介紹這三種定位方案。