深入了解CSS外邊距margin元素
- 高洛峰原創
- 2017-03-15 10:49:181528瀏覽
前面的話
margin是盒模型幾個屬性中一個非常特殊的屬性。簡單舉幾個例子：只有margin不顯示當前元素背景，只有margin可以設定為負值，margin和寬高支援auto，以及margin具有非常奇怪的重疊特性。先前的部落格文章中已經分別詳細介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介紹外邊距margin的幾個重點部分，包括重疊、auto和無效情況
#【前提】
margin重疊又叫margin合併，發生這種情況有兩個前提
1、只發生在block元素上(不包括float、absolute、inline-block元素)
2、只發生在垂直方向上(不考慮writing-mode)
【分類】
margin重疊共包括以下3種情況
1、相鄰的兄弟元素
<style>
p{
line-height: 2em;
margin:1em 0;
background-color: lightblue;
display:inline-block;
width: 100%;
}
</style>
<p>兄弟一</p>
<p>兄弟二</p>
2、父級元素和第一個或最後一個子元素，父子級的margin重疊又叫margin傳遞
<style>
.box{
background-color: pink;
height:30px;
}
.inner{
margin-top: 1em;
background-color: lightblue;
}
</style>
<p class="box">
<p class="inner">子级</p>
</p>條件
相對比相鄰兄弟元素margin重疊來說，父子級margin重疊需要滿足以下幾個條件(以margin-top重疊為例)：
a、父元素不是BFC元素
b、父元素沒有padding-top值
c、父元素沒有b order-top值
d、父元素與第一個子元素之間沒有inline元素分隔
如果是父子級的margin-bottom重疊，第d條改為父元素和最後一個子元素之間沒有inline元素分隔，以及還需要滿足父元素沒有height、min-height、max-height限制
3、空的block元素
<style>
.box{
background-color: lightgreen;
overflow: hidden;
}
.void{
margin: 1em 0;
}
</style>
</head>
<body>
<p class="box">
<p class="void"></p>
</p>
一行文字從下面結果中，可以看出空block元素應該撐開父級margin-top+margin-bottom共2em的高度，但由於margin重疊，只有1em
同樣地，空block元素發生margin重疊也需要滿足一些條件
a、元素沒有border值
# b、元素沒有padding值
c、裡面沒有inline元素
d、沒有height或min-height
【規則】
兩個正垂直外邊距，瀏覽器取大值；如果垂直外邊距都設定為負值，瀏覽器會選取兩個外邊距的絕對值的最大值；如果一個正外邊距與一個負外邊距合併，會從正外邊距減去這個負外邊距的絕對值
簡單點說，就是正正取大值、正負值相加、負負最負值
【用途】
############################################# # 在網頁佈局中，因為margin重疊的原因，我們常常把margin當作一個「問題樣式」而盡量少使用它。但實際上，它是在很大的作用的###### ###HTML文檔###創建的初衷只是用來展示資訊的。 HTML文件只使用預設樣式的前提下，如果上下margin不發生重疊，則會出現以下幾個問題：1、連續段落或列表之類，如果沒有margin重疊，首尾項間距會和其他兄弟元素呈現1: 2的關係，排版不自然；2、web中任何地方嵌套或直接放入任何裸p，都會影響原生的佈局，與web###設計原則###相違背；3、遺落的空的任意多個p標籤，會影響原來的閱讀排版###### 所以，我們要善用重疊，可以在清單項目中同時使用margin-top和margin-bottom。這樣，讓頁面結構更具健壯性，最後一個元素移除或位置調換，都不會破壞原生的佈局#######【新屬性】#########-webkit-margin- collapse######
-webkit-margin-collapse: 9b07564349a7937cfa1ac1f506cd32d0(默认重叠) | 76e6b7d265160750af9791dbc962fcd8(取消) | cc56f414bf6b1ccd7e32d0de9c8d6735(分隔)### 此屬性用來設定margin是否重疊，作用於發生margin重疊的兩個元素之一。如果，兩者都使用該屬性，一個設定為discard，一個設定為separate，則最終效果為重疊collase###### ######auto###### 只有width/height和margin可以設定auto。關於auto的詳細信息，已經在CSS視覺格式化中詳細介紹過。以下僅介紹關於margin:auto的部分######【為什麼margin:auto無法實現垂直居中】###### 水平方向可以居中是因為塊級元素的寬度預設是撐滿父級元素的，如果給寬度設定一個固定值，而左右margin設定為auto，則可以平分剩餘空間###
垂直方向不可以居中是因為區塊級元素的高度預設是內容高度，與父級元素的高度並沒有直接的關係，而上下margin設定為auto，則被重置為0
#【為什麼圖片使用margin:auto不能水平居中】
圖片無法水平居中，類似於區塊級元素無法垂直居中。因為圖片的寬度width預設是自身寬度，與父元素的寬度沒有直接關係。左右margin設定為auto，會被重置為0
所以，圖片要水平居中，需要設定為display:block元素
【實現垂直居中】
# 使用margin:auto實作垂直居中，有以下兩種方法
1、使用writing-mode:vertical-lr;
writing-mode代表頁面流方向，預設為水平方向。改為垂直方向後，可實現垂直居中，但水平不居中了
2、將元素變為絕對定位元素(IE7-瀏覽器不支援)
將元素變成絕對定位元素後，設定top:0;bottom:0;，讓絕對定位元素與定位父級的高度有了直接的連結。再設定margin:0 auto;，使margin-top和margin-bottom平分剩餘空間，達到垂直居中的效果
無效情形
1、行內元素垂直margin無效
因為行內元素垂直佈局主要是透過行高line-height和垂直對齊vertical-align來影響的，垂直margin並不會影響它們，所以不會影響垂直佈局。而在顯示方式，margin區域不會顯示元素背景，所以也不會影響自身元素的顯示，所以行內元素垂直margin無效
[注意]不包括inline-block或設定writing-mode為vertical -lr的情況
2、某些表格類別元素margin無效
ae20bdd317918ca68efdc799512a9b39``92cee25da80fac49f6fb6eec5fd2c22a``06669983c3badb677f993a8c29d18845 ``a34de1251f0d9fe1e645927f19a896e8``581cdb59a307ca5d1e365becba940e05``879b49175114808d868f5fe5e24c4e0b``b6c5a531a458a2e790c1fd6421739d1c``b4d429308760b6c2d20d6300079ed38e無法設定margin。對於display屬性來說，display為table相關類型(不包括table-caption、table、inline-table)，margin宣告無效
3、絕對定位元素非定位方向的margin值看似無效
絕對定位的margin值是一直有效的，只是因為絕對定位元素是脫離文檔流的，與其他元素節點沒有什麼關係，所以看不出效果
4、BFC造成的margin看似無效
左側元素使用浮動，右側元素使用overflow-hidden實現兩欄自適應的佈局時，右側元素的margin-left值只有夠大，才能看到效果。這是因為margin-left是相對於父元素左側，而不是圖片右側
5、內聯特性導致的margin無效
一個p裡麵包著一張圖片，當圖片的margin-top小到一定值時，圖片就不再接著向上移動了。這是因為圖片是內聯元素，它受制於內聯元素vertical-align對齊特性的影響。預設基線對齊。以頁面假想的大寫X字元為例，X是不會因為圖片margin-top夠小而跑到父元素外面的，所以圖片移動到一定位置就不再接著向上移動了
以上是深入了解CSS外邊距margin元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！