css盒子模型（Box Model）
盒子的組成
一個盒子由外到內可以分成四個部分：margin（外邊距）、border（邊框）、padding（內邊距）、content（內容）。會發現margin、border、padding是CSS屬性，因此可以通過這三個屬性來控制盒子的這三個部分。而content則是HTML元素的內容。
盒子的大小
盒子的大小指的是盒子的寬度和高度。大多數初學者容易將寬度和高度誤解為width和height屬性，然而默認情況下width和height屬性只是設置content（內容）部分的寬和高。盒子真正的寬和高按下面公式計算：
盒子的寬度 = 內容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距
盒子的高度 = 內容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距
為了顯得專業一點，我們還可以用帶屬性的公式表示：
盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
上面說到的是 默認 情況下的計算方法，另外一種情況下，width和height屬性設置的就是盒子的寬度和高度。盒子的寬度和高度的計算方式由box-sizing屬性控制。
box-sizing屬性值
content-box：默認值，width和height屬性分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距、邊框、外邊距。
border-box：為元素設定的width和height屬性決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去 邊框 和 內邊距 才能得到內容的寬度和高度。
inherit：規定應從父元素繼承box-sizing屬性的值。
當box-sizing：content-box時，這種盒子模型成為標准盒子模型，當box-sizing: border-box時，這種盒子模型稱為IE盒子模型。
盒子成分分析
margin
margin，盒子的外邊框，他是完全透明的，開發者只可以設置它的邊距。
margin包含了上下左右四條邊，開發者可以單獨設置每一條邊的邊距。
margin-top：上邊距
margin-buttom：下邊距
margin-left：左邊距
margin-right：右邊距
開發者也可以直接使用簡寫屬性margin同時設置四條邊的寬度。
margin示例1
/*margin屬性后只跟一個值，同時設置四條邊的邊距相等*/
margin: 10px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin示例2
/*margin屬性后跟兩個值，第一個值設置上下邊距，第二個是設置左右邊距*/
margin: 10px 20px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
margin示例3
/*margin屬性后跟三個值，第一個值設置上邊距，第二個是設置左右邊距，第三個值設置下邊距*/
margin: 10px 20px 30px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
margin示例4
/*margin屬性后跟四個值，第一個值設置上邊距，第二個是設置右邊距，第三個值設置下邊距，第四個值設置左邊距*/
margin: 10px 20px 30px 40px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
padding
padding表示盒子的內邊距（填充）。與外邊距不同，padding不是只能完全透明的，可以設置背景顏色和圖片。
與margin類似，padding包含了上下左右四條邊，開發者可以單獨設置每一條邊的邊距。
padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
開發者也可以直接使用簡寫屬性padding同時設置四條邊的寬度。這一部分的用法與上面的margin類似，可以參考margin的四個實例。
margin和padding的區別
margin是盒子的外邊距，即盒子與盒子之間的距離，而padding是內邊距，是盒子的邊與盒子內部元素的距離。
（margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於布局，可以分開元素，使元素與元素互不相干；padding用於設置元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”。）
語法結構
（1）padding-left:10px; /margin-left:10px; 左內/外邊距
（2）padding-right:10px; /margin-right:10px; 右內/外邊距
（3）padding-top:10px; /margin-top:10px; 上內/外邊距
（4）padding-bottom:10px; /margin-bottom:10px; 下內/外邊距
（5）padding：10px;/ margin:10px; 四邊統一內/外邊距
（6）padding:10px 20px; /margin:10px 20px; 上下、左右內/外邊距
（7）padding:10px 20px 30px;/margin:10px 20px 30px; 上、左右、下內/外邊距
（8）padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左內/外邊距
margin的用法說明:
（1）需要在border外側添加空白時，
（2）空白處不需要有背景（色）時，
（3）上下相連的兩個盒子之間的空白需要相互抵消時，比如15px+20px的margin，將得到20px的空白。
padding的用法說明:
（1）需要在border內側添加空白時（往往是文字與邊框距離的設置），
（2）空白處需要背景（色）時，
（3）上下相連的兩個盒子之間的空白希望等於兩者之和時，比如15px+20px的padding，將得到35px的空白。
關於padding：
注意：將Padding設置為負值無效：
在塊元素中：
因此，padding在塊級元素下，上下左右可以隨意設定，會對元素內部發生改變。
在內聯元素中：
行內非替換元素上設置的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值，行內元素的padding元素，只有padding-left和padding-right有效果，上下不識別；
關於margin：
margin：0 auto； 只對塊級元素起作用
在塊元素中：
因此，margin在塊級元素下，上下左右可以隨意設定。且塊級元素的margin的參照基准是前一個元素即相對於自身之前的
元素有margin距離。如果元素是第一個元素，則就是相對於父元素的margin距離。
在內聯元素中：
margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，如果你要改變內聯元素的行高即類似文本的行間距，那
么你只能使用這三個屬性：line-height，fong-size，vertical-align。請記住，這個影響內聯元素高度的是line-height而不是height。
border
border表示盒子的邊界，它可以設置成可見的，樣式多樣的。
最基本的，border像margin和padding一樣可以分別對每一條邊進行設置，也可以使用簡寫屬性border進行設置。
border-top：上邊界
border-bottom：下邊界
border-left：左邊界
border-right：右邊界
當border屬性的色值不明確指定時，如border: 1px solid，邊框顏色與當前元素的字體顏色color相同。
border實例1
/*使用簡寫屬性，同時設置四條邊界，四條邊界的寬度、樣式和顏色都是一樣的*/
border: 2px solid green;
/*下面的樣式與上面的樣式等價*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;
除了可以單獨對每一條邊進行樣式設置之外，還可以分別對邊界的寬度、樣式和顏色進行設置（下面的屬性會對四條邊進行設置），同樣可以使用簡寫屬性border進行設置。
border-width：邊界寬度
border-style：邊界樣式
border-color：邊界顏色
border-sytle屬性可取值：
none：定義無邊框。
hidden：與 “none” 相同。不過應用於表時除外，對於表，hidden 用於解決邊框沖突。
dotted：定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed：定義虛線。在大多數瀏覽器中呈現為實線。
solid：定義實線。
double：定義雙線。雙線的寬度等於 border-width 的值。
groove：定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge：定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset：定義 3D inset 邊框。其效果取決於 border-color 的值。
outset：定義 3D outset 邊框。其效果取決於 border-color 的值。
inherit：規定應該從父元素繼承邊框樣式。
border實例2
/*使用簡寫屬性設置寬度、樣式和顏色，同時作用於四條邊*/
border: 2px dotted green;
/*下面的樣式與上面的樣式等價*/
border-width: 2px;
border-style: dotted;
border-color: green;
這還不算完，開發者還可以對單獨一條邊界單獨設置寬度、樣式或顏色。以上兩組屬性都可以作為下面屬性的簡寫屬性。
border-top-width：上邊界寬度
border-top-style：上邊界樣式
border-top-color：上邊界顏色
border-bottom-width：下邊界寬度
border-bottom-style：下邊界樣式
border-bottom-color：下邊界顏色
border-left-width：左邊界寬度
border-left-style：左邊界樣式
border-left-color：左邊界顏色
border-right-width：右邊界寬度
border-right-style：右邊界樣式
border-right-color：右邊界顏色
border實例3
/*使用簡寫屬性設置寬度、樣式和顏色，同時作用於四條邊*/
border: 2px dotted green;
/*下面的樣式與上面簡寫樣式等價*/
border-width: 2px;
border-style: dotted;
border-color: green;
/*下面的樣式與上面簡寫樣式等價*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;
/*下面樣式又與上面三個樣式的任意一個樣式等價*/
border-top-width: 2px;
border-top-style: dotted;
border-top-color: green;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: green;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 2px;
border-right-style: dotted;
border-right-color: green;
上面的屬性是對各邊的寬度、樣式和顏色進行設置，下面一些有趣的屬性可以讓盒子變得更加地有創意、更加好看。
首先，了解一下 邊界半徑 ，也就是圓角。邊界半徑由屬性border-radius進行控制，這是一個簡寫屬性，像上面提到過的margin、padding等一樣，可以有一個、兩個、三個或四個值進行設置。同樣也可以對盒子的每一個角的半徑進行單獨設置。
border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-left-radius：右下角
邊界半徑可以使用 px、em 等長度單位，也可以使用百分數。
border-radius值的個數以及每個值對應控制的位置：
一個值：設置四個角有相同的邊界半徑；
兩個值：第一個值設置左上角和右下角，第二個值設置右上角和左下角；
三個值：第一個值設置左上角，第二個值設置右上角和左下角，第三個值設置右下角；
四個值：第一個值設置左上角，第二個值設置右上角，第三個值設置右下角，第四個之設置左下角。
border實例4
/*以簡寫屬性的三個值為例*/
border-radius: 10px 20px 30px;
/*下面樣式與上面簡寫屬性樣式等價*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;
開發者還可以設置x半徑和y半徑的不同，創建橢圓形角。x半徑表示水平半徑，y半徑表示垂直半徑。在border-radius屬性中，x半徑和y半徑用“/”分隔，在border-top-left等四個屬性中，傳入兩個值，第一個值表示x半徑，第二個值表示y半徑。
border實例5
/*簡寫屬性的x半徑設置兩個值，y半徑設置三個值*/
border-radius: 30px 20px / 20px 10px 30px;
/*在簡寫屬性中設置角度時，值與盒子角的映射是x和y分開的，按照上面提到的規則進行映射*/
/*x半徑兩個值，第一個值控制左上角和右下角，第二個值控制右上角和左下角*/
/*y半徑三個值，第一個值控制左上角，第二個值控制右上角和左下角，第三個值控制右下角*/
border-top-left-radius: 30px 20px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 30px 30px;
border-bottom-left-radius: 20px 10px;
盒子陰影
在盒子的組成成分之外，CSS3給盒子添加了陰影。盒子的陰影由box-shadow屬性控制，陰影的輪廓與盒子邊界border的輪廓一樣。該屬性的正規語法如下：
none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
1
inset：默認陰影在邊框外。使用 inset 后，陰影在邊框內（即使是透明邊框），背景之上內容之下。
offset-x, offset-y：這是頭兩個長度值，用來設置陰影偏移量，相對於border外邊線開始計算。offset-x 設置水平偏移量，如果是負值則陰影位於元素左邊。offset-y 設置垂直偏移量，如果是負值則陰影位於元素上面。如果兩者都是0，那么陰影位於元素后面。這時如果設置了 blur-radius 或 spread-radius 則有模糊效果。
blur-radius：這是第三個長度值。值越大，模糊面積越大，陰影就越大越淡。 不能為負值。默認為0，此時陰影邊緣銳利。
spread-radius：這是第四個長度值。取正值時，陰影擴大；取負值時，陰影收縮。默認為0，此時陰影與元素同樣大。
color：如果沒有指定，則由瀏覽器決定——通常是color的值，不過目前Safari取透明。
設置多個陰影時，使用逗號將每個陰影的值隔開。前面的陰影會在后面陰影之上，如果上層有透明度較低的部分，會與下層的顏色重疊，合成新顏色。
border-shadow實例
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* 多個陰影*/
box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;
/*全局關鍵字*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;