盒子模型（BOX）的總結
可以說頁面是由一個個盒模型組成的，html文件中的每個元素都被描繪成盒模型；盒模型由外而內包括：邊距（margin）、邊框（border）、填充（padding）、內容（content）。css盒模型是區分方向的。請記住上右下左這個順序。css中一些具有四項取值的屬性（比如margin，padding等）都是按照這個順序進行賦值的。
1、由於瀏覽器相容的問題，盒模型分為標準（W3C）盒模型和IE盒模型。以下是兩者的區別：
*兩者最重要的區別是width寬度的定義不同；
標準（W3C）盒模型：
標準（W3C）盒模型的寬度width=content(內容)；
CSS3 BOX-Sizing的詳解：
CSS3中新增了一個樣式box-sizing，
box-sizing: content-box | border-box | inherit
inherit:規定從父元素繼承box-sizing屬性的值。
| box-sizing:content-box（W3C）;元素的width=content(內容); |
bor-sizing:border-box（IE6以下）元素的width=border(邊框)+padding（內邊距）+content（內容）
瀏覽器相容問題：
box-sizing屬性現代瀏覽器都支援，但IE家族只有IE8版本以上才支援，雖然現代瀏覽器支援box-sizing，但有些瀏覽器還是需要加上自己的字首，Mozilla需要加上-moz-,webkit核心需要加上-webkit-,presto核心需要加-o-,IE8加-ms-。
注意：
避免觸發IE盒模型的方法是使用<!DOCTYPE html>宣告，告訴IE採用W3C盒子模型即可。 |
現在我們討論下box-sizing的取值問題：
1、content-box:此值為其預設值，其讓元素維持W3C的標準Box Model，也就是說元素的寬度/高度（width/height）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。
2、border-box:此值讓元素維持IE傳統的Box Model（IE6以下版本），也就是說元素的寬度/高度等於元素內容的寬度/高度。（從上面Box Model介紹可知，我們這裡的content width/height包含了元素的border,padding,內容的width/height【此處的內容寬度/高度=width/height-border-padding】）。
IE盒模型：
IE盒模型的width（寬度）=border+padding+content；
此處應該怎樣具體的設定使用這兩種模型呢？
通過設定 box-sizing:content-box(W3C)/border-box(IE)就可以達到自由切換的效果；
2、盒模型在不同情況下的表現：
<1>、在此我們先了解一下塊級元素，行內元素兩者的區別及，非替換元素，替換元素，根元素等知識點。
塊級元素
塊級元素包含行內元素與其他塊級元素，可以建立更大的結構。
常用的塊級元素有: div、ul、li、dl、dt、dd、p、h1~h6、blockquote
塊級元素列表：html5中新新增標籤：
（1）、<figcaption>：圖文資訊組標題，
<figcaption> 標籤為 <figure> 元素定義標題。
<figcaption> 元素應該被置於 <figure> 元素的第一個或最後一個子元素的位置。
<figure>: 規定獨立的流內容（影象、圖表、照片、程式碼等等）。
<figure> 元素的內容應該與主內容相關，同時元素的位置相對於主內容是獨立的。如果被刪除，則不應對文件流產生影響。
例如：
<figure>
<img src="/statics/images/course/pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figcaption>標籤支援全域性屬性和事件屬性。
（2）、<artical>:文章，
例子：
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (縮寫為 IE9)在2011年3月14日21:00釋出。</p> </article>
（3）、output：表單輸出，
<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<inputtype="range"id="a"value="50">100
+<inputtype="number"id="b"value="50">
=<outputname="x"for="a b"></output></form>
（4）、aside：側欄內容，<aside>標籤定義<artical>標籤的額外內容。
（5）、footer：區段尾或頁尾，
（6）、audio：音訊播放
（7）、video：視訊播放，
（8）、section：頁面區段，
（9）、canvas：畫布、繪製圖形，
（10）、header：區段頭或頁頭
<header> 標籤定義文件或者文件的一部分割槽域的頁首。
<header> 元素應該作為介紹內容或者導航連結欄的容器。
在一個文件中，您可以定義多個 <header> 元素。
註釋：<header> 標籤不能被放在 <footer>、<address> 或者另一個 <header> 元素內部。
（11）、hgroup：標題組，
（12）、address：聯絡方式資訊，
<address> 標籤定義文件作者/所有者的聯絡資訊。 如果 <address> 元素位於 <body> 元素內部，則它表示該文件作者/所有者的聯絡資訊。 如果 <address> 元素位於 <article> 元素內部，則它表示該文章作者/所有者的聯絡資訊。 <address> 元素的文字通常呈現為斜體。大多數瀏覽器會在該元素的前後新增換行。注意：<address>標籤不能用來描述郵件地址。
（13）、ol：有序列表，
（14）、p：行，
（15）、form：表單，
（16）、pre：預格式化文字，
（17）、blockquote：塊引用
<blockquote>標籤用來引用大段的內容塊，處於該標籤內的文字會獨自分離出來，並且自動縮排。
（18）、h1-h6：標題，
（19）、table：表格，
（20）、dd：列表中條目描述，
<dd> 標籤被用來對一個描述列表中的專案/名字進行描述。 <dd> 標籤與 <dl> （定義一個描述列表）和 <dt> （定義專案/名字）一起使用。 在 <dd> 標籤內，您能放置段落、換行、圖片、連結、列表等等。
例子：
<dl>
<dt>coffee</dt>
<dd>block hot drink</dd>
</dl>
（21）、dl：定義列表，
（22）、div，hr：水平分割線
行內元素
所謂的行內元素就是：只佔據它對應的標籤的邊框所包含內容的空間， 只能包含資料和其他行內元素。不會自動換下一行。
常用的行內元素有：a, b:此標籤對文字加粗, span, img, input,strong,select：用於實現下拉列表,label：<label> 標籤為 input 元素定義標註（標記）。em：此元素通常只是一個隱式和顯示的對比,textarea
塊級元素和行內元素之間的區別：
塊狀元素獨佔一行，預設情況下，寬度自動填滿父元素寬度，行內元素預設是不分行，行內元素寬高不能由css決定，而是由內容決定的，行內元素的margin和padding的垂直方向上不產生邊距效果，可以使用display:block;或display:inline;實現塊級元素和行內元素的相互轉換。
空元素：即沒有內容的HTML元素，例如：br、meta、hr、link、input、img
水平格式化：水平格式化的屬性有：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。這7個屬性值加起來往往是父級元素的width值。
其中margin-left，width，margin-right可以設定為auto；
垂直格式化：
垂直格式化屬性有：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，則其高度將會被設定為其內容元素的高度總和。
以上是我總結的有關盒子模型的知識。有錯誤的請大家改正，謝謝！