首頁  >  文章  >  web前端  >  深入了解CSS外邊距margin元素

深入了解CSS外邊距margin元素

高洛峰
高洛峰原創
2017-03-15 10:49:181569瀏覽

前面的話

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn