1.背景介紹
- 标準盒模型
- ie盒模型
2.知識剖析
今天的小課堂，隻需要了解标準盒模型，盒模型由内至外分别是content、padding、border、margin，其中可以使用百分比的有content ,padding,margin，邊框border則不可以用%機關
元素水準分為3種：block水準，inline-block水準，inline水準，3種元素各有不同的表現。 block水準預設情況下，水準豎直方向上的padding,margin有效。 inline元素水準排列，豎直方向上的padding,margin無效。 inline-block水準元素，水準豎直方向上的padding,margin有效。
簡單講講margin與padding的文法，即一個值，兩個值，三個值這些大家都應該明白了（DEMO1） 今天主要講講别的東西，margin與padding的差別(個人了解) 差別一：pdding能增加元素的容器的可視區域，margin則會減少預設塊級元素的可視區域(demo2) 差別二：margin有負值，padding不能使用負值。（demo1驗證）
margin與padding的%值，真的是繼承父級width嗎？ 請看demo3 結論，未使用絕對定位（固定定位）的元素内外邊距的%值都是繼承父級盒子，如果是絕對定位(固定定位)則是根據其繼承關系的定位元素，沒有就是根據html元素為基準 關于margin負值，padding不能負值 Dome1示範 < h4 >margin外邊距重疊 </ h4 > < p >margin外邊距重疊的種類 </ p > < p >margin外邊距重疊的前提1、正常的塊級元素，（非浮動和絕對定位元素) </ p > < p >margin外邊距重疊的前提2、(writing-model為正常流) </ p > < p >如何消除margin外邊距重疊 </ p > （demo4）
< h4 >消除margin重疊的規則 </ h4 > < p >父級與子級消除margin重疊 </ p > < p >父級BFC化 </ p > < p >父級有padding </ p > < p >父級有border </ p > < p >父級與子級之間沒有inline水準元素 </ p > < p >父級與最後一個子級之間發生margin-bottom重疊，父級沒有設定height，max-height，min-height的限制 </ p > < h4 >空塊級元素的消除重疊 </ h4 > < p >該元素沒有border </ p > < p >該元素沒有padding </ p > < p >該元素沒有height，min-height的限制 </ p > < p >該元素沒有inline元素 </ p > < h4 >margin:auto(DEMO5) </ h4 > < h4 >margin:auto的表現 </ h4 > < h4 >margin：負值的應用（demo6） </ h4 >
3.常見問題
margin：auto為什麼豎直方向不垂直居中
是真的不起作用？還是height的關系（DEMO7）
4.解決方案
DEOM
5.編碼實戰
DEMO
6.擴充思考
< p >inline水準元素豎直方向上的padding的真的不生效？ </ p >
< p >%值真的是繼承父級的width </ p > demo8
7.參考文獻
參考一：張鑫旭慕課網margin,padding深入了解視訊
8.更多讨論
< p >讨論點1：margin與padding何時使用呢？ </ p > < p >讨論點2：margin與padding配合使用的效果在哪裡？(等高布局) </ p >
三個問題：
1、margin與padding的%值，真的是繼承父級width嗎？
結論，未使用絕對定位（固定定位）的元素内外邊距的%值都是繼承父級盒子，如果是絕對定位(固定定位)則是根據其繼承關系的定位元素，沒有就是根據html元素為基準 關于margin負值，padding不能負值
2、
如果是inline水準和inline-block水準的元素，margin無論是正值還是負值都不會影響盒子的尺寸，隻會改變盒子的位置，如果是margin-left負值，盒子會向左側移動，如果是margin-top負值則會向上移動，如果是margin-right和margin-bottom則會影響右側和下面的盒子，右側會左移，下面的盒子會浮上來。
如果是塊級元素設定了width，那麼它的表現和上面所述一樣。
如果沒有設定width，left和right方向設定負值，那麼就會在該方向上擴充容器水準方向尺寸。
3、
margin 負值的left和right的表現說有差別也有差別，說有差別，就是兩個inline-block元素，第一個設定margin-left的負值，發現這兩個元素都左移。這是差別。
說沒有差別是對第二個元素的影響
此時設定紅色盒子的margin-right:-20px;和綠色margin-left:-20px；變現是一樣的，是以這裡對綠色盒子來說margin-left和margin-right負值沒有差別。
結論：盒子本身的margin-left負值影響自身，margin-right的負值影響下一個盒子，這是差別。
如果是對綠色盒子，紅色盒子的margin-right和自身margin-left來說就沒有差別。