盒子模型的概念
所謂盒子模型就是把html頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器灵份。每個(gè)矩形都是有元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）甩卓、外邊距（margin）組成。
IE6的盒模型的bug:
背景色不能穿透邊框
結(jié)論：
網(wǎng)頁就是多個(gè)盒子嵌套排列的結(jié)果
內(nèi)邊距出現(xiàn)在內(nèi)容區(qū)域的周圍蕉斜，當(dāng)給元素添加背景色或背景圖像時(shí)逾柿，該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中
外邊距是該元素與相鄰元素之間的距離
如果給元素定義邊框?qū)傩裕吙驅(qū)⒊霈F(xiàn)在內(nèi)邊框和外邊框之間
注意：雖然盒子模型擁有內(nèi)邊距宅此、邊框机错、外邊距、寬和高這些基本屬性父腕，但是并不要求每個(gè)元素都必須定義這些屬性
設(shè)置上邊框的寬度
border-top-width:20px;
設(shè)置上邊框的顏色
border-top-color: red;
設(shè)置上邊框的樣式
border-top-style: solid;
邊框的樣式設(shè)置也可以進(jìn)行合寫
border-top: 寬度 樣式 顏色;
border-top: 5px solid red;
可以用1行css設(shè)置上下左右所有的邊框的樣式
border: 10px dotted blue;
去掉默認(rèn)的邊框弱匪，兼容性最好的寫法是
border: 0 none;
上 右 下 左
padding: 20px 5px 10px 5px;
可以讓div水平居中顯示：
margin: 0 auto;
行內(nèi)元素 關(guān)于padding和margin問題
注意：
? ? ? ? ? 行內(nèi)元素不要給上下的margin和padding
? ? ? ? ? 上下margin和padding會(huì)被忽略
? ? ? ? ? 左右margin和padding會(huì)起作用
整個(gè)盒子的占用的空間寬度： 左邊框?qū)挾?左padding+width+右padding+右邊框
整個(gè)盒子的占用的空間高度： 上邊框?qū)挾?上padding+highth+下padding+下邊框
相鄰塊元素垂直外邊距的合并
當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom璧亮，下面的元素有上外邊距margin-top萧诫，擇他們之間的垂直間距不是margin-bottom和margin-top之和，而是兩者中的較大者杜顺。
這種現(xiàn)象被稱為相鄰塊元素垂直外邊框的合并（也稱外邊距坍塌）
嵌套塊元素垂直外邊距的合并
對(duì)于兩個(gè)嵌套關(guān)系的塊元素财搁，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并躬络，合并后的外邊距為兩者中的較大者尖奔，即是父元素的上外邊距為0，也會(huì)發(fā)生合并
如果希望外邊距不合并，可以為父元素定義1像素的上邊框或上內(nèi)邊距提茁。
