可以參考《精通CSS 高階WEB標準解決方案》第三章。

視覺化格式模型

視覺化格式模型要掌握的3個最重要的CSS概念是 浮動、定位、盒模型。 這些概念控制在頁面上安排和顯示元素的方式， 形成CSS的基本佈局。

主要學習內容：

• 盒模型的複雜性和特點
• 如何以及為什麼使用外邊距
• 絕對定位和相對定位之間的差異
• 浮動和清理是如何工作的

1、盒模型概念

如果給元素新增背景， 背景會應用於內容和內邊距組成的區域

CSS2.1 包含outline屬性。 與border不同， 輪廓繪製在元素框之上。所以它們不影響元素的大小或定位。

在CSS中， width和height指的是元素內容區域的寬度和高度。 增加內邊距、邊框和外邊距不會影響內容區域尺寸， 但是會增加元素框的總尺寸。

內邊距、邊框、外邊距可以應用於一個元素的所有邊， 也可以應用於單獨的邊。 外邊距也可以為負值。

1.1 IE和盒模型

IE的早期版本， 包括IE6， 在混雜模式中使用自己的非標準盒模型。 在CSS中， 這些瀏覽器的width、height屬性不是內容的寬/高， 而是內容、 內邊距和邊框的寬/高總和。

這實際上很有道理， 現實中的框具有固定尺寸， 而內邊距是放在框裡面的。 新增的內邊距越多， 給內容留下的空間越少。 儘管符合邏輯， 但是這些IE版本不符合規範。

有幾個辦法可以解決這個問題， 但是目前最好的解決辦法是迴避這個問題。 也就是說， 如果已經為元素指定了寬/高， 就不要給元素新增具有指定寬度的內邊距， 而是將內邊距或外邊距新增到元素的父元素或子元素。

1.2 外邊距疊加

外邊距疊加是一個相當簡單的概念。 但是，在實踐中對網頁進行佈局時， 它會造成許多混淆。 簡單的說， 當兩個或更多個垂直邊距相遇時， 它們將形成一個外邊距。這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。

一般來說， 垂直外邊距疊加有三種情況：

• 元素自身疊加
• 相鄰元素疊加
• 包含（父子）元素疊加

元素自身疊加

我們知道， 盒模型是 內容→內邊距→邊框→外邊距 這樣逐層包含的結構。 當元素沒有內容（即空元素）、內邊距、邊框時， 它的上下邊距就相遇了， 即會產生疊加（垂直方向）。 當為元素新增內容、 內邊距、 邊框任何一項， 就會取消疊加。

相鄰元素疊加

這個比較好理解， 相鄰的兩個元素， 如果它們的上下邊距相遇，即會產生疊加。

包含（父子）元素疊加

包含元素的外邊距隔著 父元素的內邊距和邊框， 當這兩項都不存在的時候， 父子元素垂直外邊距相鄰， 產生疊加。 新增任何一項即會取消疊加。

只有普通文件流中塊框的垂直外邊距才會發生外邊距疊加。 行內框、 浮動框或絕對定位框之間的外邊距不會疊加。

有關普通文件流、 浮動、 定位等概念會在下一節 定位裡介紹。