CSS屬性之margin

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

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

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

這個特點在bootstrap的布局裡就有用到。

<p class="wrap">  父元素padding: 0 10px;  <p class="yellow">此block元素沒有設定margin值</p>  <p class="red">此block元素設定margin-left:-10px;margin-right:-10px; 展開了元素寬度</p></p>

* {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來改變元素的可視寬度。同樣，對於絕對位置元素，我們也能改變它的可視高度。

<p class="wrap">  父元素position: relative;  <p class="yellow">絕對位置,並且設定top:0; bottom:0; 垂直展開元素，通過設定margin來改變可視高度</p></p>

* {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值為百分比值時，其實際值等於父元素的寬度*百分比；

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

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

* {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;一樣可以實現：

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

* {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都有效

更多 CSS屬性之margin 相關文章請關注topic.alibabacloud.com！

