理解CSS外邊距margin

時間 2019-11-26

標籤理解 css 邊距 margin 欄目 CSS 简体版

原文原文鏈接

前面的話

margin是盒模型幾個屬性中一個很是特殊的屬性。簡單舉幾個例子：只有margin不顯示當前元素背景，只有margin能夠設置爲負值，margin和寬高支持auto，以及margin具備很是奇怪的重疊特性。以前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介紹外邊距margin的幾個重點部分，包括重疊、auto和無效狀況css

重疊

【前提】html

margin重疊又叫margin合併，發生這種狀況有兩個前提web

一、只發生在block元素上(不包括float、absolute、inline-block元素)django

二、只發生在垂直方向上(不考慮writing-mode)瀏覽器

【分類】markdown

margin重疊共包括如下3種狀況佈局

一、相鄰的兄弟元素post

<style> p{ line-height: 2em; margin:1em 0; background-color: lightblue; display:inline-block; width: 100%; } </style> <p>兄弟一</p> <p>兄弟二</p>

二、父級元素和第一個或最後一個子元素，父子級的margin重疊又叫margin傳遞spa

<style> .box{ background-color: pink; height:30px; } .inner{ margin-top: 1em; background-color: lightblue; } </style> <div class="box"> <div class="inner">子級</div> </div>

條件設計

相對比相鄰兄弟元素margin重疊來講，父子級margin重疊須要知足如下幾個條件(以margin-top重疊爲例)：

a、父元素不是BFC元素

b、父元素沒有padding-top值

c、父元素沒有border-top值

d、父元素和第一個子元素之間沒有inline元素分隔

若是是父子級的margin-bottom重疊，第d條改成父元素和最後一個子元素之間沒有inline元素分隔，以及還須要知足父元素沒有height、min-height、max-height限制

三、空的block元素

<style> .box{ background-color: lightgreen; overflow: hidden; } .void{ margin: 1em 0; } </style> </head> <body> <div class="box"> <div class="void"></div> </div> 一行文字

從下面結果中，能夠看出空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不發生重疊，則會出現如下幾個問題：一、連續段落或列表之類，若是沒有margin重疊，首尾項間距會和其餘兄弟元素呈現1:2的關係，排版不天然；二、web中任何地方嵌套或直接放入任何裸div，都會影響原生的佈局，與web設計原則相違背；三、遺落的空的任意多個p標籤，會影響原來的閱讀排版

因此，咱們要善用重疊，能夠在列表項中同時使用margin-top和margin-bottom。這樣，使頁面結構更具備健壯性，最後一個元素移除或位置調換，都不會破壞原生的佈局

【新屬性】

-webkit-margin-collapse

-webkit-margin-collapse: <collapse>(默認重疊) | <discard>(取消) | <separate>(分隔)

該屬性用於設置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實現垂直居中，有如下兩種方法

一、使用writing-mode:vertical-lr;

writing-mode表明頁面流方向，默認是水平方向。改成垂直方向後，可實現垂直居中，但水平不居中了

二、將元素變爲絕對定位元素(IE7-瀏覽器不支持)

將元素變爲絕對定位元素後，設置top:0;bottom:0;，使絕對定位元素與定位父級的高度有了直接的聯繫。再設置margin:0 auto;，使margin-top和margin-bottom平分剩餘空間，達到垂直居中的效果

無效情形

一、行內元素垂直margin無效

由於行內元素垂直佈局主要是經過行高line-height和垂直對齊vertical-align來影響的，垂直margin並不會影響它們，因此不會影響垂直佈局。而在顯示方式，margin區域不會顯示元素背景，因此也不會影響自身元素的顯示，因此行內元素垂直margin無效

[注意]不包括inline-block或設置writing-mode爲vertical-lr的狀況

二、某些表格類元素margin無效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>不可設置margin。對於display屬性來講，display爲table相關類型(不包括table-caption、table、inline-table)，margin聲明無效

三、絕對定位元素非定位方向的margin值看似無效

絕對定位的margin值是一直有效的，只是由於絕對定位元素是脫離文檔流的，與其餘元素節點沒有什麼關係，因此看不出效果

四、BFC形成的margin看似無效

左側元素使用浮動，右側元素使用overflow-hidden實現兩欄自適應的佈局時，右側元素的margin-left值只有足夠大，才能看到效果。這是由於margin-left是相對於父元素左側，而不是圖片右側

五、內聯特性致使的margin無效

一個div裏面包着一張圖片，當圖片的margin-top小到必定值時，圖片就再也不接着向上移動了。這是由於圖片是內聯元素，它受制於內聯元素vertical-align對齊特性的影響。默認基線對齊。以頁面假想的大寫X字符爲例，X是不會由於圖片margin-top足夠小而跑到父元素外面的，因此圖片移動到必定位置就再也不接着向上移動了

好的代碼像粥同樣，都是用時間熬出來的

標籤: css總結