前言
盒模型是CSS中一個(gè)十分重要的概念，掌握好它對(duì)網(wǎng)站的構(gòu)建有十分深刻的作用歧焦。
盒子模型可分為兩種缺脉，標(biāo)準(zhǔn)w3c盒模型以及IE盒模型。這篇文章就是探討這兩者以及具體應(yīng)用劳秋。
盒模型
html文檔中的每個(gè)元素都被描繪成矩形盒子仓手，這些矩形盒子通過(guò)一個(gè)模型來(lái)描述其占用空間，這個(gè)模型稱為盒模型玻淑。
盒模型通過(guò)四個(gè)邊界來(lái)描述：margin（外邊距）嗽冒，border（邊框），padding（內(nèi)邊距）补履，content（內(nèi)容區(qū)域）
IE盒模型
概念： ie 盒子模型的范圍包括 margin添坊、border、padding箫锤、content贬蛙，和標(biāo)準(zhǔn) w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading雨女。
例如一個(gè)盒子模型如下：margin:40px,border:20px,padding:20px;width:200px;height:100px;
則用IE盒模型來(lái)解釋為：
該盒子在網(wǎng)頁(yè)中占據(jù)的大小有：
高：40x2+100=180px
寬：40x2+200=280px
盒子的實(shí)際大小為：高：100px；寬：200px阳准；
標(biāo)準(zhǔn)盒模型
概念：盒子模型的范圍包括 margin氛堕、border、padding野蝇、content岔擂，并且 content 部分不包含其他部分。
如上面的盒子模型：
margin:40px,border:20px,padding:20px;width:200px;height:100px;
則用w3c標(biāo)準(zhǔn)盒模型解釋：
該盒子在網(wǎng)頁(yè)中占用大欣嗽拧：
高：40x2+20x2+20x2+100=260px
寬：40x2+20x2+20x2+200=360px
盒模型實(shí)際大新伊椤：
高：20x2+20x2+100=180px
寬：20x2+20x2+200=280px
標(biāo)準(zhǔn)盒模型的幾項(xiàng)注意
- padding，border七冲，margin都是可選的痛倚，默認(rèn)值為0，但是瀏覽器會(huì)自行設(shè)置元素的margin和padding,則可以通過(guò)以下方式覆蓋瀏覽器樣式澜躺。注意：這里的*表示所有元素蝉稳，但是這樣性能不好，建議依次列出常用的元素來(lái)設(shè)置掘鄙。
*{
margin:0;
padding:0
}
如果給元素設(shè)置背景耘戚，并且邊框的顏色為透明，背景將應(yīng)用于內(nèi)容操漠，內(nèi)邊距和邊框組成的區(qū)域收津。
水平格式化
水平格式化的7大屬性是：margin-left，border-left浊伙，padding-left撞秋，width，padding-right嚣鄙，border-right吻贿，margin-right。這7個(gè)屬性值加起來(lái)往往是父級(jí)元素的width值哑子。
其中margin-left舅列，width，margin-right可以設(shè)置為auto卧蜓。
1.當(dāng)其中一個(gè)設(shè)置為auto時(shí)帐要，即其余兩個(gè)屬性有特定值，那么被設(shè)置為auto的屬性會(huì)被拉伸或縮小至與父元素的寬相等烦却。
2.當(dāng)margin-left和margin-right設(shè)置為auto時(shí)宠叼，則這是一種令塊級(jí)元素水平居中的方式。
3.當(dāng)width和margin-left或者margin-right設(shè)置為auto，則margin-left和margin-right為 0冒冬，width會(huì)滿足父元素的寬伸蚯。-
垂直格式化
垂直格式化與水平格式化的屬性類似，即是對(duì)應(yīng)的top和bottom简烤，同樣可設(shè)置margin-top剂邮、height和margin-bottom。
1.不能將margin-top和margin-bottom設(shè)置為auto來(lái)使元素垂直居中
2.垂直外邊距合并:兩個(gè)外邊距之和應(yīng)為30px横侦；但實(shí)際上只取最大的邊距20px
html<div class="m20"> 外邊距20px </div> <div class="m10"> 外邊距10px </div>css
.m20 { margin: 20px; } .m10 { margin: 10px; }
