盒模型的再認識

1.盒子模型：就是HTML頁面中佈局元素看作是一個舉行的盒子，css盒子包括:content內容、padding內邊距、margin外邊距、border邊框

1.1 border、padding、margin的參數爲

　　值的個數：

padding、margin值的個數	表達的意思
padding:5px	1個值，表明上下左右都爲5像素
padding:5px 10px	2個值，表明上下爲5，左右爲10像素
padding：5px 10px 15px	3個值，表明上5，全部爲10項目，下15像素
padding：5px 10px 15px 20px	4個值，表明上5，右10，下15，左20像素

1.2外邊距合併：

　　1.2.1 相鄰元素垂直的外邊距合併，當兩個上下相鄰的快元素，若是上面的塊級有margin-bottom,下面的塊級元素有margin-top，這是兩個塊級元素之間的垂直距離不是兩個margin的和，而是兩個margin中較大者爲垂直距離，

　　解決：只給你個塊級元素margin，

　　1.2.2 嵌套塊元素垂直外邊距塌陷：對於兩個嵌套關係（父子關係）的塊級元素，父元素設置margin-top，子元素也設置margi-top，這時候父級元素也會跟着下來，就叫外邊距塌陷

2.盒子有兩種標準：一個是標準模型，一個是IE模型

　　2.1 標準模型，寬度就等於content,IE模型寬度包括，content+padding

　　2.2css3的屬性box-sizing

　　標準模型：box-sizing：content-box

　　IE模型     ：box-sizing ：border-box