盒模型由內容(content)、填充(padding)、邊框(border)、邊界(margin)組成，一個盒子中主要的屬性就5個：width、height、padding、border、margin。
下面一一介紹盒子中的區域
width
寬度，CSS中width指的是內容的寬度，而不是盒子的寬度，CSS中height指的是內容的高度，而不是盒子的高度
width:200px; height: 200px; padding:50px; margin: 50px; border: 5px solid red; background-color: green;
上面的代碼，設置的寬度為200px，那么內容的寬度則為200px，但是當我們把鼠標移到盒子上，顯示的寬度為310px, 此寬度為盒子的寬度，真實占有寬度= 左border + 左padding + width + 右padding + 右border，如果想保持一個盒子的真實占有寬度不變，那么加width就要減padding。加padding就要減width。
比如寫三個402*402的盒子，答案會有無窮多種，只有按照上述公式計算組合即可
.box1{width: 400px;height: 400px;border: 1px solid red;}
.box2{width: 200px;height: 200px;border: 6px solid red;padding: 95px;}
.box3{width: 0px;height: 0px;padding: 200px;border: 1px solid red;}
<div class="box1">第1個盒子</div>
<div class="box2">第2個盒子</div>
<div class="box3">第3個盒子</div>
padding
padding就是內邊距。padding的區域有背景顏色，css2.1前提下，並且背景顏色一定和內容區域的相同。也就是說，background-color將填充所有boder以內的區域。
padding是4個方向的，所以我們能夠分別描述4個方向的padding。方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。
小屬性：這種適合只有一個方向需要設置值的時候采用，不然各個方向都要寫很麻煩。
padding-top: 30px;padding-right: 20px;padding-bottom: 40px;padding-left: 100px;
綜合屬性：方向為上、右、下、左
/*如果寫了四個（表示方向為 上、右、下、左）*/ padding:30px 20px 40px 100px; /*上、右、下、左（和右一樣）*/ padding: 20px 30px 40px;
/*如果寫了兩個（表示方向為 上、右、下（和上一樣）、左（和右一樣））*/ padding:30px 20px; /*如果寫了一個（表示方向為所有方向）*/ padding:30px;
一般的用法是：用小屬性層疊大屬性
padding: 20px; /*各個方向都設置為20*/
padding-left: 30px;/*左邊單獨設置為30*/
不能把小屬性，寫在大屬性前面
padding-left: 30px; padding: 20px; /*這樣寫上邊一行已經失去意義了*/
下面考一考你是否真的掌握了？說出下面盒子真實占有寬高
div{
width: 200px;
height: 200px;
padding: 10px 20px 30px;
padding-right: 40px;
border: 1px solid #000;
}
真實占有寬度 = 200（內容寬） + 20（左填充） + 40（右填充） + 1（左邊框） + 1（右邊框） = 262px
內邊距會影響盒子大小，但是繼承的寬度， padding不會擠開 。
一些元素，默認帶有padding，比如ul標簽，所以，我們為了做站的時候，便於控制，總是喜歡清除這個默認的padding：
*{margin: 0;padding: 0;}
*的效率不高，所以我們使用並集選擇器，羅列所有的標簽
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
border
border就是邊框。邊框有三個要素：粗細、線型、顏色。顏色如果不寫，默認是黑色。另外兩個屬性不寫，顯示不出來邊框。border在各大瀏覽器中渲染會有細微差別，具體看這篇專門有介紹
border: 1px solid red;
border是一個大綜合屬性，上面代碼是把4個邊框，都設置為1px寬度、線型實線、red顏色。
border屬性能夠被拆開，有兩大種拆開的方式：
1） 按3要素:
border-width、border-style、border-color
border-width:10px; → 邊框寬度 border-style:solid; → 線型 border-color:red; → 顏色
如果某一個小要素后面是空格隔開的多個值，那么就是上右下左的順序：
border-width:10px 20px; border-style:solid dashed dotted; border-color:red green blue yellow;
2） 按方向：
border-top、border-right、border-bottom、border-left
border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-left:10px solid red;
按方向還能再拆一層，就是把每個方向的，每個要素拆開，一共12條語句：
border-top-width:10px; border-top-style:solid; border-top-color:red;
border-right-width:10px; border-right-style:solid; border-right-color:red;
border-bottom-width:10px; border-bottom-style:solid; border-bottom-color:red;
border-left-width:10px; border-left-style:solid; border-left-color:red;
border可以沒有
border:none; /*某一條邊沒有*/ border-left: none; /*或者*/ border-left-width: 0;
IE6瀏覽器兼容問題
不支持高度小於12px的盒子，任何小於12px的盒子，在IE6中看都偏大，原因是在IE6下，所有標簽的最小高度都是為12px
解決辦法很簡單，就是將盒子的字號，設置小（小於盒子的高），比如0px。
height: 4px;
_font-size: 0px;
margin
margin和padding的用法差不多，只不過一個是內邊距，一個是外邊距，不過margin的值可以設置為負值
margin的塌陷現象
標准文檔流中，豎直方向的margin不疊加，以較大的為准。
如果不在標准流，比如盒子都浮動了，那么兩個盒子之間是沒有塌陷現象的
盒子居中
margin的值可以為auto，表示自動。當left、right兩個方向，都是auto的時候，盒子居中了
margin:0 auto;
注意：
1）使用margin:0 auto; 的盒子，必須有width，有明確的width
2）只有標准流的盒子，才能使用margin:0 auto; 居中。也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。文本的居中，要使用 text-align:center;
margin:0 auto; → 讓這個div自己在大容器中居中。 text-align: center; → 讓這個div內部的文本居中。
善於使用父元素的padding，而不是子元素的margin
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。所以，我們一定要善於使用父親的padding，而不是兒子的margin。
如果父親沒有border，那么兒子的margin實際上踹的是“流”，踹的是這“行”。所以，父親整體也掉下來了，比如：
關於margin的IE6兼容問題
IE6雙倍margin bug
出現連續浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素，會雙倍marign。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ border: 1px solid #000; height: 100px; list-style: none; } ul li{ float: left; width: 120px; height: 40px; margin-left: 40px; background-color: orange; } ul li.no1{ margin-left:20px; } </style> </head> <body> <ul> <li class="no1"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
解決方案：
1）使浮動的方向和margin的方向，相反。
float: left; margin-right: 40px;
2）使用hack，單獨給隊首的元素，寫一個一半的margin
ul li.no1{_margin-left:20px;}
IE6的3px bug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 400px; height: 400px; background-color: orange; } div p{ margin-right: 10px; float: right; width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div> <p></p> </div> </body> </html>
解決辦法：不用管，因為根本就不允許用兒子踹父親。所以，如果出現了3px bug，說明你的代碼不標准。
本文非原創，純粹是學習筆記