前言

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

寬高

寬度width被定義為從左內邊界到右內邊界的距離，高度height被定義為從上內邊界到下內邊界的距離

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

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

【auto】
寬高和margin可以設置auto。

對於塊級元素來說，寬度設置為auto，則會盡可能的寬。

元素寬度=包含塊寬度—元素水平外邊距-元素水平邊距寬度-元素水平內邊距；

高度設置為auto，則會盡可能的窄。詳細來說，元素高度=恰好足以包含其內聯內容的高度

[註意]如果沒有顯式聲明包含塊的height，則元素的百分數高度會重置為auto

【怪異盒模型】
IE6-瀏覽器的寬高定義的是可見元素框的尺寸，而不是元素框的內容區尺寸

【最大最小寬高】
設置最大最小寬高的好處是可以相對安全地混合使用不同的單位。使用百分數大小的同時，也可以設置基於長度的限制

min-width | min-height

max-width | max-height
值: <length> | <percentage> | inherit
初始值: none
應用於: 塊級元素和替換元素
繼承性: 無
百分數: 相對於包含塊的寬度(高度)

[註意]IE6-瀏覽器不支持min-width | min-height | max-width | max-height
[註意]當最小寬度(高度)大於最大寬度(高度)時，以最小寬高的值為準

內邊距

相比於盒模型的其他屬性(如在定位中經常使用負值的margin，因為CSS3的到來重獲光彩的border等)，padding顯得中規中矩了很多，沒有什麽兼容性，也沒有一些特殊的問題

對於行內元素，左內邊距應用到元素的開始處，右內邊距應用到元素的結尾處，垂直內邊距不影響行高，但會影響自身尺寸，加背景顏色可以看出

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

padding
值:[<length> | <percentage>]{1,4} | inherit
初始值: 未定義
應用於: 所有元素
繼承性: 無
百分數: 相對於包含塊的width

【50%】
塊級元素通過padding:50%可以實現正方形的效果，因為水平和垂直padding的百分比值都是相對於包含塊的寬度決定的，常常用於移動端頭圖

如果是內聯元素使用padding:50%，必須配合font-size:0，因為使用inline元素的垂直padding會出現"幽靈空白節點"，也就是規範中"strut"。所以通過font-size:0使其尺寸為0

效果展示：
塊元素

行內元素：選擇font-size = 0; 去除“幽靈空白節點”

【表單】
1、所有瀏覽器input/textarea/button都內置padding
2、部分瀏覽器select下拉內置padding，firefox、IE8+可以設置padding
3、除IE10-以外的其他瀏覽器，radio/checkbox單選復選框無內置padding，且無法設置padding。IE10-瀏覽器的radio/checkbox單選復選框有內置padding，且可以設置padding
[註意]除IE10-以外的其他瀏覽器，radio/checkbox單選復選框無內置border，且無法設置border

【button兼容】
1、在firefox瀏覽器中，設置padding:0，按鈕左右兩側依然有padding，這時需要使用firefox自有樣式

button::-moz-focus-inner{padding:0;}

2、IE7-瀏覽器下文字越多，左右padding逐漸變大，設置overflow:visible可解決該問題

3、button按鈕的padding與高度計算不兼容

button{
    line-height:20px;
    padding:10px;
    border:none;
}

//結果為：
IE7: 45px
firefox:42px
chrome/IE8+:40px

可以使用label標簽來實現類似的效果，然後把按鈕button進行可訪問性隱藏即可

<button id="btn"></button>
<label for="btn">按鈕</label>

label{
    display:inline-block;
    line-height:20px;
    padding:10px;
    border:none;
}

//結果為：
IE7: 40px
firefox:40px
IE8+:40px
chrome:40px

外邊距

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

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

margin
值:[<length> | <percentage> | auto]{1,4} | inherit
初始值: 未定義
應用於: 所有元素
繼承性: 無
百分數: 相對於包含塊的width

[註意]對於普通元素來說，包含塊就是塊級父級元素，對於定位元素來說，包含塊是定位父級。所以，普通元素的margin百分比相對於塊級父級元素的width，定位元素的margin百分比相對於定位父級的width

[註意]margin負值的作用非常大

邊框

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

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

.d1{
    width: 200px;
    border: 1px solid red;
}    
.s1{
    border: 1px solid black;
    background-color: yellow;
    padding: 6px;    
    margin: 6px;
    font-size: 30px;
    line-height: 50px;
}

<div class="d1"><span class="s1">測試文字測試文字測試文字</span></div>

box-sizing

在CSS中盒模型被分為兩種，第一種是W3C的標準模型，第二種是IE怪異盒模型。

不同之處在於後者的寬高定義的是可見元素框的尺寸，而不是元素框的內容區尺寸。目前對於瀏覽器大多數元素都是基於W3C標準的盒模型，但對於表單form中的部分元素還是基於IE的怪異盒模型，如input裏的radio、checkbox、button等元素，如果給其設置border和padding它們也只會往元素盒內延伸

在W3C的標準模型下，寬度和高度僅僅包含了內容寬度，除去了邊框和內邊距兩個區域，這樣為web設計師處理效果帶來了不少麻煩。為了解決這個問題，CSS3新增了一個盒模型屬性box-sizing，能夠事先定義盒模型的尺寸解析方式

[註意]IE7-瀏覽器不支持

box-sizing
值: content-box | border-box | padding-box | inherit
初始值: content-box
應用於: 塊級元素和替換元素
繼承性: 無

[註意1]只有firefox瀏覽器支持padding-box屬性值
[註意2]IE瀏覽器在getComputedStyle得到width/height是按照標準模式計算的，而不論box-sizing的取值

效果展示：

CSS盒模型深入理解