原文地址：http://luopq.com/2015/10/26/CSS-Box-Model/
本文主要是學習CSS盒模型的筆記，總結了一些基本概念，知識點和細節。
一些基本概念
HTML的大多數元素都是塊級(block)元素或行內(inline)元素
塊級元素
默認情況下，塊級元素會另起一行，並盡可能的充滿整個容器。
塊級元素可以包含行內元素和其他塊級元素，相比於行內元素可以創建更復雜和大型的結構
塊級元素列表：
html5新增的元素：
figcation：圖文信息組標題 ，article：文章，figure：圖文信息組
output：表單輸出，aside：側欄內容，footer：區段尾或頁尾，audio：音頻播放
video：視頻播放，section：頁面區段，canvas：畫布、繪制圖形，header：區段頭或頁頭
hgroup：標題組，
address：聯系方式信息，ol：有序列表，p：行，form：表單，pre：預格式化文本，blockqute：塊引用
h1-h6：標題，table：表格，dd：列表中條目描述，dl：定義列表，div，hr：水平分割線
行內元素
行內元素不會另起一行只占據它對應的標簽的邊框所包含內容的空間，
只能包含數據和其他行內元素
行內元素列表
b，big，i，small，tt，
abbr，acronym，cite，code，dfn，em，kbd，strong，samp，var，
a，bdo，br，img，map，object，q，script，span，sub，sup，
button，input，label，select，textarea
塊級元素和行內元素的區別
塊級元素：
1.會另起一行，
2.可以設置width，height，margin，padding，border屬性
3.默認寬度是容器的100%
行內元素：
1.和其他元素在同一行內
2.高度和寬度就是內容的高度和寬度
3.可以設置margin-left和margin-right屬性，無法設置margin-top和margin-bottom屬性
4.border和padding可以設置，但是border-top和padding-top到頁面頂部后就不再增加
正常流
正常流指：從左到右，從上到下顯示。要讓一個元素不在正常流中，唯一的辦法是讓元素浮動或定位
非替換元素
如果元素的內容包含在文檔中，則稱之為非替換元素。比如一個段落的文本都在該元素本身之內，這個段落就是一個非替換元素。
替換元素
作為其他內容占位符的一個元素稱為替換元素，根據標簽和屬性的值來顯示內容的元素。比如img元素，它只是指向一個圖像文件，這個文件插入到文檔流中。大多數表單元素（input，根據type屬性來顯示內容）也是替換元素。
根元素
位於文檔樹的頂端，在html文檔中就是html元素
盒模型
html文檔中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其占用空間，這個模型稱為盒模型。盒模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內邊距），content（內容區域），如圖所示：
幾點提示
1.padding，border，margin都是可選的，默認值為0，但是瀏覽器會自行設置元素的margin和padding，通過在css樣式表中設置
1 *{ 2 margin:0; 3 padding:0 4 }
來覆蓋瀏覽器樣式。注意：這里的*表示所有元素，但是這樣性能不好，建議依次列出常用的元素來設置
2.如果給元素設置背景，並且邊框的顏色為透明，背景將應用於內容，內邊距和邊框組成的區域。
3.瀏覽器兼容性
一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。
根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。
不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標准模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
水平格式化
非替換元素的水平格式化
水平格式化的7大屬性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。這7個屬性值加起來往往是父級元素的width值。
其中margin-left，width，margin-right可以設置為auto。
主要有下面幾種情況：
一個屬性設置成auto
如果三個屬性中某個屬性設置了auto，其余兩個為特定的值，那么設置auto的屬性為確定所需的元素，從而使得元素框的寬度等於父級元素的width。
例子
HTML代碼
1 <div class="parent"> 2 <span class="block">塊級元素</span> 3 </div>
CSS代碼
1 .parent{ 2 width:600px 3 } 4 5 6 div { 7 background: #eeb3b3 none repeat scroll 0 0; 8 } 9 10 11 .block { 12 background: #ffd800 none repeat scroll 0 0; 13 display: block; 14 margin-left: auto; 15 margin-right: 100px; 16 padding: 30px; 17 width: 100px; 18 }
被設置為auto的margin-auto屬性值為340px，即margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=340+0+30+100+30+0+100=600
總和不等於父級元素的width
使用auto可以彌補實際值與所需總和的差距，如果三個屬性都設置了特定值，但是總和不等於父級元素的width。
修改上面例子中的margin-left為100px，即
1 .block { 2 background: #ffd800 none repeat scroll 0 0; 3 display: block; 4 margin-left: 100px; 5 margin-right: 100px; 6 padding: 30px; 7 width: 100px; 8 9 }
在上面的CSS中，margin-left，width，margin-right都設置了特定值，但是七大屬性總和不等於父級元素的width。這種情況下：
在FF中，margin-right的值為開發者設定的值
在Chrome中，margin-right被強制為auto
width設置為auto
如果margin-left和margin-right都設置特定值，width設置為auto，則width將會等於某個特定值以達到父級元素的width。
如果將width修改為auto，即：
1 .block { 2 background: #ffd800 none repeat scroll 0 0; 3 display: block; 4 margin-left: 100px; 5 margin-right: 100px; 6 padding: 30px; 7 width: auto; 8 9 }
元素的width將被被設定為340px來使總和達到父級元素的width
margin-left和margin-right設置成auto
如果margin-left和amrgin-right都設置為auto，則它們會設置相等的值，因此元素將在父級元素中居中。這是將塊級元素居中的一種方法。注意：text-align設置為center只適用於塊級元素中的內聯內容居中，並不能使塊級元素居中。
設置margin屬性為margin:0 auto
1 .block { 2 background: #ffd800 none repeat scroll 0 0; 3 display: block; 4 margin: 0 auto; 5 padding: 30px; 6 width: 100px; 7 8 }
margin-left和margin-right的值會被設置為相等，使得元素居中
某個外邊距和width設置成auto
如果設置某個外邊距和width為auto，則設置為auto的外邊距會為0，width會設置為所需的值來填充父級元素。
1 .block { 2 background: #ffd800 none repeat scroll 0 0; 3 display: block; 4 margin-left: auto; 5 margin-right: 100px; 6 padding: 30px; 7 width: auto; 8 }
設置margin-left和width為auto，則margin-left將被設置為0，width會被設置為440px來滿足父級元素的width
全設置成auto
如果margin和width都設置為auto，則兩個外邊距會設置為0，width會盡可能寬。
1 .block { 2 background: #ffd800 none repeat scroll 0 0; 3 display: block; 4 margin-left: auto; 5 margin-right: auto; 6 padding: 30px; 7 width: auto; 8 }
三個值都設置為auto，則兩個外邊距會設置為0，width會被設置為540px
負外邊距
7個屬性只要都是大於等於0的值，總和總是等於父級元素的width，不會超過父級元素的區域
但是可以通過制定負外邊距來得到比父級元素width更大的區域
1 .block { 2 background: #ffd800 none repeat scroll 0 0; 3 display: block; 4 margin-left: 100px; 5 margin-right: -400px; 6 padding: 30px; 7 width: auto; 8 }
設置margin-right為-400px，則元素會大於父級元素width，因為100+0+30+840+30+0-400=600，元素的width為840px
替換元素的水平格式化
替換元素的水平格式化規則和非替換元素的規則類似，只有一個width有區別，如果width設置為auto，則元素的寬度是內容的固有寬度。注意：對於img標簽，如果width不等於其固有寬度，則height也會等比例增加，除非設置特定值。反過來如果height設置高度，width也會等比例增加
垂直格式化
垂直格式化和水平格式化類似，也有7個相關屬性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，這7個屬性的總和必須等於父級元素的height屬性。
其中margin-top，margin-bottom和height可以設置成auto
一個正常流中的塊元素的margin-top和margin-bottom設置為auto后，會被設置為0，即不能將元素垂直居中，實際上元素沒有外邊距。定位元素如果設置成auto有不同的處理結果。
如果正常流元素的height設置為auto，則其高度將會被設置為其內容元素的高度總和。
垂直外邊距合並
垂直外邊距合並：當兩個盒子（可能是兄弟關系也可能是祖先關系）的垂直外邊距相遇時，它們將形成一個外邊距。合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
例子：
html代碼
1 <div class="m20"> 外邊距20px </div> 2 <div class="m10"> 外邊距10px </div>
css代碼
1 .m20 { margin: 20px; } 2 .m10 { margin: 10px; }
如圖所示，兩個div標簽的外邊距分別是20px，10px，但是最終兩個div之間的距離是20px，而不是20+10=30px
行內元素的盒模型
行內元素也是有盒模型的，但是有幾點要注意：
1.對於非替換元素，比如a，span標簽等
（1）可以設置margin-left和margin-right屬性，無法設置margin-top和margin-bottom屬性
（2）行內元素border和padding可以設置，但是border-top和padding-top到頁面頂部后就不再增加
2.對於替換元素，比如input，img標簽
margin，padding，border都有效果