CSS屬性之margin

0.對自身可視寬度的影響

1>改變處於標準文檔流中，未設置width值的block元素的可視寬度

在標準文檔流中，對於沒有設置寬度的block元素，當其具備內容或者設置高度後，其自身寬度爲父元素寬度的100%，這個時候給block元素設置水平方向的margin值，就會改變元素的可視寬度。可是不能改變高度，由於block元素的高度是固定或者等於其內容的高度，並不會拉伸。

這個特色在bootstrap的佈局裏就有用到。

<div class="wrap">
  父元素padding: 0 10px;
  <div class="yellow">此block元素沒有設置margin值</div>
  <div class="red">此block元素設置margin-left:-10px;margin-right:-10px; 拉伸了元素寬度</div>
</div>

* {margin:0; padding:0;}

.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  padding: 0 10px;
  border: 1px solid #ccc;
}
.red {
  height: 100px;
  background-color: red;
  margin: 0 -10px;
}
.yellow {
  height: 100px;
  background-color: yellow;  
}

2>改變未設置寬度，可是設置了定位（成對設置的定位，如：top/bottom，left/right）的絕對定位元素的可視寬高

當絕對定位元素沒有設置width，但設置了top/bottom，left/right值時，元素會被拉伸。好比設置left:0; right:0; 元素的寬度就是第一個相對定位的父元素的寬度的100%了，這時也能經過margin來改變元素的可視寬度。一樣，對於絕對定位元素，咱們也能改變它的可視高度。

 

<div class="wrap">
  父元素position: relative;
  <div class="yellow">絕對定位,而且設置top:0; bottom:0; 垂直拉伸元素，經過設置margin來改變可視高度</div>
</div>

* {margin:0; padding:0;}

.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}
.yellow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  margin: 50px 0;
  background-color: yellow;  
}

1.百分比值的margin

跟padding同樣，對於正常處於標準文檔流的元素而言，當元素的margin值爲百分比值時，其實際值等於父元素的寬度*百分比；

當元素設置絕對定位後，其實際值等於第一個相對於它定位的父元素的寬度*百分比

<div class="wrap">
  父元素寬度400px;
  <div class="yellow">margin-top:10%; 實際的margin-top=400px*10%=40px</div>
</div>

* {margin:0; padding:0;}

.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}
.yellow {
  width: 200px;
  height: 200px;
  margin-top: 10%;
  background-color: yellow;  
}

2.margin重疊

margin重疊一般發生在兄弟元素之間以及父子元素之間，若是你們平時沒有注意的話，margin重疊可能經常會給咱們帶來一些小麻煩，這裏就把發生margin重疊的狀況總結一下。

1>兄弟元素之間

當兩個元素髮生margin重疊時，其實際值的狀況：

1. 當兩個margin值都爲正時，實際值=兩個中較大的值
2. 當兩個margin值是一正一負時，實際值=兩個值相加
3. 當兩個margin值都爲負時，實際值=兩個中絕對值大的

那何時會發生margin重疊呢？

對於兩個相鄰的兄弟元素而言，只要是處於標準文檔流中的block元素，垂直方向都會發生margin重疊。

2>父元素與第一個/最後一個子元素之間

1. 設置border-top/bottom
2. 設置padding-top/bottom
3. 設置overflow:hidden/auto等屬性，實現BFC

3.margin的auto值

給一個定寬的block元素設置margin: 0 auto;使元素水平居中，這應該是不少人常常使用的，不過對於auto值的具體做用，可能不多有人知道。

簡單點說，對於未設置固定width或height值的元素，若是能自動拉伸，那麼當設置了固定值後，auto就能夠用來分配剩餘空間大小。

感受有點拗口，舉個例子，有一個定寬的block元素，咱們想讓他在右邊顯示，最經常使用的就是使用float屬性，不過用margin-left: auto;同樣能夠實現：

<div class="wrap">
  <div class="red">margin-left: auto;</div>
</div>

* {margin:0; padding:0;}

.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-left: auto;
}

設置margin值爲auto的有效場景包括：

1. 普通定寬block元素，水平方向設置有效；
2. 絕對定位元素，在設置了成對left/right，top/bottom或者都設置的狀況下，定寬或定高都有效；
3. 在父元素爲display: flex;的狀況下，子元素margin值爲auto都有效