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
百分比值，對於當元素的值其實際值等於父元素的寬度*百分比；
當元素設定絕對定位後，其實際值等於第一個相對於它定位的父元素的寬度*百分比-
<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;
}登入後複製
<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重疊margin重疊通常發生在兄弟元素之間以及父子元素之間，如果大家平時沒有註意的話，margin重疊可能常常會給我們帶來一些小麻煩，這裡就把發生margin重疊的情況總結一下。
當兩個元素發生margin重疊時，其實際值的情況：
-
當兩個margin值都為正時，實際值=兩個中較大的值
當兩個margin值是一正一負時，實際值=兩個值相加
當兩個margin值都為負時，實際值=兩個中絕對值大的
那什麼時候會發生margin重疊呢？
對於兩個相鄰的兄弟元素而言，只要是處於標準文檔流中的block元素，垂直方向都會發生margin重疊。
2>父元素與第一個/最後一個子元素之間
設定border-top/bottom
設定padding-top/bottom
-
.實現BFC
-
3.margin的auto值
- 給一個定寬的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中文網！ 🎜
