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

1.百分比值的margin

元

1.百分比值的margin

元

1.百分比值的margin

pad

1.百分比值的margin

pad

百分比值，對於當元素的值其實際值等於父元素的寬度*百分比；

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

1. <p class="wrap">
     父元素宽度400px;  <p class="yellow">margin-top:10%; 实际的margin-top=400px*10%=40px</p></p>

2. * {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;  
   }

<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;
}

rrreee

rrreee

2.margin重疊

1. margin重疊通常發生在兄弟元素之間以及父子元素之間，如果大家平時沒有註意的話，margin重疊可能常常會給我們帶來一些小麻煩，這裡就把發生margin重疊的情況總結一下。

1>兄弟元素之間

2. 當兩個元素發生margin重疊時，其實際值的情況：

3. 當兩個margin值都為正時，實際值=兩個中較大的值

當兩個margin值是一正一負時，實際值=兩個值相加

當兩個margin值都為負時，實際值=兩個中絕對值大的

那什麼時候會發生margin重疊呢？

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

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

設定border-top/bottom

設定padding-top/bottom

1. .實現BFC

2. 3.margin的auto值
3. 給一個定寬的block元素設定margin: 0 auto;使元素水平居中，這應該是很多人經常使用的，不過對於auto值的具體作用，可能很少人知道。
   簡單點說，對於未設定固定width或height值的元素，如果能自動拉伸，那麼當設定了固定值後，auto就可以用來分配剩餘空間大小。

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

🎜rrreee 🎜🎜🎜🎜rrreee🎜🎜🎜🎜🎜🎜設定margin值為auto的有效場景包括：🎜🎜🎜🎜 /right，top/bottom或都設定的情況下，定寬或定高都有效；🎜🎜🎜🎜在父元素為display: flex;的情況下，子元素margin值為auto都有效🎜🎜🎜🎜 多 CSS屬性之margin 相關文章請關注PHP中文網！ 🎜