W3C組織岸裙，建議把所有網(wǎng)頁上的對象都放在一個“盒子”中—盒子模型。
盒子模型主要適用于塊級元素速缆。
盒子模型主要定義元素的四個區(qū)域：內(nèi)容降允，內(nèi)邊距，邊框艺糜，外邊距剧董；分別對應元素的四個屬性：content、padding破停、border翅楼、margin。
設計師真慢，通過控制盒子的屬性毅臊，進而完成網(wǎng)頁設計。
盒子模型的在頁面中所占的寬度是：左外邊距+左邊寬+左內(nèi)邊距+內(nèi)容+右內(nèi)邊距+右邊框+右外邊距黑界。
以上是盒子模型的定義管嬉，如果筆試問道，在畫一個圖朗鸠，應該就可以了蚯撩。
理解了盒子模型的構(gòu)成，還需要知道如何為盒子模型的屬性賦值童社，以控制盒子模型的大小位置求厕。
-
height著隆、width
<style type="text/css">
div{
height: 100px;
width: 100px;
background: red;
padding: 20px;
border: 5px solid blue;
}
</style>
<div>
content
</div>
左側(cè)IE5.x效果扰楼，右側(cè)非IE5.x效果
如圖，可以發(fā)現(xiàn)美浦，在IE5.x版本height與width包括了border弦赖、padding、content浦辨。當新增padding值時蹬竖，其實就是向內(nèi)占據(jù)空間。
其他版本，height與width則只是指代content部分的大小币厕。
【驗證默認：height列另、width】
【觀察】
左：IE5.x 中：IE6、7 右:IE8及現(xiàn)代瀏覽器
【結(jié)論】width自動占據(jù)整個父元素的寬度旦装，高度根據(jù)自身內(nèi)容而定页衙。 -
margin、padding
定義：設置一個元素所有外邊距的寬度阴绢。
<style type="text/css">
body{border: 1px solid red ;//目的：標識 } div{ height: 100px; width: 100px; background: red; border: 5px solid blue; } </style>
左：IE5.x 中：IE6店乐、7 右:IE8及現(xiàn)代瀏覽器
上面這三個對比是在不設置
margin與padding之后的對比圖。【驗證:padding】
*{padding:0;}
【觀察】以上三個圖沒有變化呻袭。
【結(jié)論】瀏覽器未對body眨八、div設置默認padding值。
【驗證：margin】
body{margin:0;}
【觀察】
左：IE5.x 中：IE6左电、7 右:IE8及現(xiàn)代瀏覽器
【結(jié)論】瀏覽器未對div設置margin廉侧，對body設置了margin，但是在IE5.xbody默認margin的方式有點詭異篓足。當對IE5.x的body設置margin時伏穆，也是向內(nèi)增加邊距。
接下來設置分別設置margin纷纫、padding觀察區(qū)別枕扫。
【設置：margin】
div{margin：20px;}
【觀察】
左：IE5.x 中：IE6、7 右:IE8及現(xiàn)代瀏覽器
【結(jié)論】ie5.x內(nèi)部div對于margin的設置與其對于父元素bodymargin的設置效果一樣辱魁。IE6烟瞧、7對于div下外邊距的設置不是很好。IE8染簇、及現(xiàn)代瀏覽器可以滿足参滴。
【設置：padding】
body{padding：10px;}
【觀察】
左：IE5.x 中：IE6、7 右:IE8及現(xiàn)代瀏覽器
【結(jié)論】
對于padding的兼容還是不錯的锻弓。
\
通過以上對于margin砾赔、padding的對比，我認為青灼，學習設置之前暴心，還是有必要了解一下，瀏覽器對于各個元素默認的padding杂拨、margin的設置专普。
這里有關(guān)于元素的默認邊距值。實際上弹沽，在我們編寫代碼時檀夹，我還是建議
body p ol ul form h1 h2 {
padding: 0;
margin: 0;
}
盡可能將這些被設了默認邊距的元素筋粗，進行初始標準化設置，有些人會問可以用通配符統(tǒng)一設置炸渡，效率低啊娜亿，原因之前介紹過啦。
【11.22日補充】
默認定位??情況下蚌堵，margin的垂直外邊距會相互重疊暇唾，元素之間的垂直間距，會等于=max((上)magin-bottom,(下)margin-top)
但是元素被設置了float后辰斋，與其他元素的垂直外邊距不會重疊策州，元素之間的垂直間距，會等于=(上)magin-bottom+(下)margin-top
需要注意的是宫仗，以上的設置均是在普通流定位模型下的情況够挂。關(guān)于定位，我馬上就要寫這一篇啦藕夫。
歡迎補充與指正?
