當時說到了盒模型，盒模型包含著margin，為什麼要在這裡說margin呢？因為元素和元素在垂直方向上margin裡面有坑。
我們來看乙個例子：
html結構：
css樣式：
*當給兩個標準流下兄弟盒子 設定垂直方向上的margin時，那麼以較大的為準，那麼我們稱這種現象叫塌陷。沒法解決，我們稱為這種技巧叫「奇淫技巧」。記住這種現象，在布局垂直方向盒子的時候主要margin的用法。.father
.box1
.box2
當我們給兩個標準流下的兄弟盒子設定浮動之後，就不會出現margin塌陷的問題。
div當乙個div元素設定margin：0 auto;時就會居中盒子，那我們知道margin:0 auto;表示上下外邊距離為0，左右為auto的距離，那麼auto是什麼意思呢？
設定margin-left:auto；我們發現盒子盡可能大的右邊有很大的距離，沒有什麼意義。當設定margin-right:auto；我們發現盒子盡可能大的左邊有很大的距離。當兩條語句並存的時候，我們發現盒子盡可能大的左右兩邊有很大的距離。此時我們就發現盒子居中了。
另外如何給盒子設定浮動，那麼margin:0 auto失效。
使用margin：0 auto;注意點：
1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;
2.只有標準流下的盒子 才能使用margin:0 auto;
當乙個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文字，文字水平居中使用text-align: center;
另外大家一定要知道margin屬性是描述兄弟盒子的關係，而padding描述的是父子盒子的關係
如果讓大家實現如圖的效果，應該有不少的同學做不出來。
那麼我們來看看這個案例，它的坑在**？
下面這個**應該是大家都會去寫的**。
因為父親沒有border，那麼兒子margin-top實際上踹的是「流」 踹的是行,所以父親掉下來了，一旦給父親乙個border發現就好了。
那麼問題來了，我們不可能在頁面中無緣無故的去給盒子加乙個border，所以此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。
盒子模型的margin負數用法
盒子的margin用法大家都應該很清楚，在實際中一般使用margin來水平居中或者讓自己移動相應的位置，但是margin給負數在實際中也是有用的。如圖為兩個浮動的盒子。給左邊的盒子margin left 50px 後如圖所示 如圖，藍色盒子移動了，但是粉色盒子自身只是被壓住了，並沒有移動。如下 do...
前端 盒子模型
盒模型分為兩種 標準模型和ie模型,主要了解標準模型 盒模型示意圖 盒子模型的屬性 width 內容的寬度 height 內容的高度 padding 內邊距,邊框到內容的距離 border 邊框,就是指盒子的寬度 margin 外邊距,盒子邊框到附近最近盒子的距離 盒模型的計算 盒子的真實寬度 wi...
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...