深入理解盒模型

前面的話

所有文檔元素都生成一個矩形框，這稱為元素框(element box)，它描述了一個元素在文檔布局中所占的空間大小。而且，每個框影響著其他元素框的位置和大小

寬高

在CSS中，可以對任何塊級元素設置顯式高度。如果指定高度大于顯示內容所需高度，多余的高度會產生一個視覺效果，就好像有額外的內邊距一樣；如果指定高度小于顯示內容所需高度，則會向元素添加一個滾動條。如果元素內容的高度大于元素框的高度，瀏覽器的具體行為取決于overflow屬性

寬度 width被定義為從左內邊界到右內邊界的距離

高度 height被定義為從上內邊界到下內邊界的距離

[注意]寬度和高度無法應用到行內非替換元素，且不能為負

width/height

值:<length> | <percentage> | auto | inherit

初始值: auto

應用于: 塊級元素和替換元素

繼承性: 無

百分數: 相對于包含塊的width/height

計算值: 對于auto和百分數值，根據指定確定；否則是一個絕對長度，除非元素不能應用該屬性(此時為auto)

<怪異盒模型>

IE6-瀏覽器的寬高定義的是可見元素框的尺寸，而不是元素框的內容區尺寸

內邊距

對于行內元素，左內邊距應用到元素的開始處，右內邊距應用到元素的結尾處，上下內邊距不影響行高

[注意]內邊距不能是負值

padding

值:[<length> | <percentage>]{1,4} | inherit

初始值: 未定義

應用于: 所有元素

繼承性: 無

百分數: 相對于包含塊的width

外邊距

設置外邊距margin會在元素外創建額外的空白，空白通常指不能放其他元素的區域，而且在這個區域中可以看到父元素的背景

外邊距可以應用到行內元素，上下外邊距對行高沒有任何影響。由于上下外邊距實際上是透明的，所以這個聲明沒有任何視覺效果。左外邊距應用到元素開始處；右外邊距應用到元素結束處

margin

值:[<length> | <percentage> | auto]{1,4} | inherit

初始值: 未定義

應用于: 所有元素

繼承性: 無

百分數: 相對于包含塊的width

<四值順序>

【1個值】margin: top|right|bottom|left;
【2個值】margin: top|bottom left|right;
【3個值】margin: top left|right bottom;
【4個值】margin: top right bottom left;

合并垂直外邊距

相鄰的兄弟級元素外邊距合并又稱為外邊距疊加

包含的父子級元素外邊距合并又稱為外邊距傳遞

在包含塊上設置邊框或內邊距時，會使其子元素的外邊距包含在包含塊內，會阻止外邊距傳遞

負外邊距

如果垂直外邊距都設置為負值，瀏覽器會選取兩個外邊距的絕對值的最大值。如果一個正外邊距與一個負外邊距合并，會從正外邊距減去這個負外邊距的絕對值

邊框

元素外邊距內就是元素的邊框border，元素的邊框是圍繞元素內容的內邊距的一條或多條線。邊框由粗線、樣式和顏色三部分組成

對于行內元素來說，邊框實際上畫在各行之外的下一個像素上，由于各行緊挨著，所以其邊框會重疊。無論為行內元素的邊框設置怎樣的寬度，不會對行高有任何影響；但左右邊框會分別顯示在元素的開始處和結尾處

關于邊框的詳細信息移步至此