1. margin

說到margin不得不說到css盒子模型

標準盒子模型（W3C標準盒子模型）

標準盒子模型：屬性 width，height，指的是 content ；

IE 盒模型（又稱怪異盒子模型）：屬性 width，height 包含 content、border 和 padding，指的是 content + padding + border

切換盒子模型

//W3C盒子模型
box-sizing: content-box 
//IE盒子模型
box-sizing: border-box 

使用margin佈局

• margin-top 元素自身會向上移動，同時會影響下方的元素會向上移動；
• margin-botom 元素自身不會位移，但是會減少自身供css讀取的高度，從而影響下方的元素會向上移動。
• margin-left 元素自身會向左移動，同時會影響其它元素；
• margin-right 元素自身不會位移，但是會減少自身供css讀取的寬度，從而影響右側的元素會向左移動；

  <div style="background: green;height: 40px;width: 100px;margin-left: 0;">left</div>
  <div style="background:red;height: 40px;margin: -40px 100px;">464654</div>
  <div style="background:yellow;height: 40px;;width: 100px;margin-left: calc(100% - 100px); ">right</div>
 

實現的效果是 一個三欄佈局 兩側固定中間自適應

什麼時候會出現margin塌陷的問題

當我們使用margin 實現下面需求的時候

  <div style="background: green;height: 300px;width: 300px;margin: 50px 0 0 50px;">
    <div style="background: yellow;height: 100px;width: 100px;margin: 50px 0 0 50px;">
      <div style="background: red;height: 50px;width: 50px;margin: 20px 0 0 20px;"></div>
    </div>
  </div>
 

得到的效果圖

左側的margin還好，但是top的margin值 出現了塌陷！！！
...一句話總結：父子巢狀的元素垂直方向的margin取他們最大值。

怎麼來解決這種現象，需要我們瞭解到BFC

BFC 中文是 塊級作用域上下文
BFC，能改變一個盒子的語法規則，能很好的解決margin塌陷和margin合併的問題

BFC的觸發機制

1. overflow為hidden/scroll/auto
2. float屬性為left/right
3. display為inline-block/table-cell/table-caption
4. position為absolute/fixed

BFC=OFDP

通過給父元素新增相應的css屬性，觸發BFC 其內部的子元素就不會與父元素的margin出現塌陷

什麼時候會出現margin合併

是當兩個兄弟盒子元素 在一起 他們設定了相對應的margin值會出現合併現象

這個時候他們中間的距離會取他們兩個的最大值100px，就出現了合併的問題
解決思路跟 margin塌陷是一樣的