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中文網其他相關文章!