挖掘margin屬性的內(nèi)涵

alanoddsoff 發(fā)布于2019-08-29 15:29 / 2803人閱讀

摘要：合并問題塊級元素的上邊距和下邊距有時(shí)會(huì)合并或者折疊為一個(gè)外邊距捕獲到的重要信息只發(fā)生在塊級元素，但不包括浮動(dòng)元素和絕對定位元素只發(fā)生在和當(dāng)前文檔流方向的相垂直的方向上由于默認(rèn)文檔流是水平流，因此發(fā)生合并的就是垂直方向會(huì)出現(xiàn)外邊距合并的三種基

1、margin合并問題

塊級元素的上邊距和下邊距有時(shí)會(huì)合并或者折疊為一個(gè)外邊距

捕獲到的重要信息

只發(fā)生在塊級元素，但不包括浮動(dòng)元素和絕對定位元素

只發(fā)生在和當(dāng)前文檔流方向的相垂直的方向上（由于默認(rèn)文檔流是水平流，因此發(fā)生margin合并的就是垂直方向）

會(huì)出現(xiàn)外邊距合并的三種基本情況 1、相鄰元素之間

第一行
第二行
p {margin: 1em 0;}

第一行和第二行之間的間距還是1em，因?yàn)榈谝恍械膍argin-bottom和第二行的margin-top合并了

2、父元素和它第一個(gè)或最后一個(gè)子元素之間

當(dāng)父元素和它第一個(gè)子元素之間沒有邊框、內(nèi)邊距、行內(nèi)內(nèi)容或者清除浮動(dòng)將兩者的margin-top分開

同樣的當(dāng)父元素和最后一個(gè)子元素之間沒有邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height/max-height將兩者的margin-bottom分開，那么這時(shí)，兩個(gè)外邊距就會(huì)合并，子元素的外邊距就會(huì)溢出到父元素外面（父元素的外邊距為兩者之和，子元素的外邊距為0）

在默認(rèn)狀態(tài)下，下面三種設(shè)置是等效的

3、空的塊級元素

當(dāng)一個(gè)塊級元素中不包含任何內(nèi)容時(shí)，并且在其margin-top和margin-bottom之間沒有邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height將兩者分開，此時(shí)外邊距會(huì)合并


    

.father {overflow:hidden;}
.son {margin:1em 0;}

此時(shí).father所在的這個(gè)父級

元素高度僅僅是1em，因?yàn)?son這個(gè)空

元素的margin-top和margin-bottom合并在一起了

margin合并的計(jì)算規(guī)則

正正取大值：取大的那個(gè)值

正負(fù)值相加：取計(jì)算后的值

負(fù)負(fù)最負(fù)值：取絕對負(fù)值最大的值

margin合并的意義 1、兄弟元素的margin合并

使圖文信息的排版更加舒服自然，保證元素上下間距一致

2、父子margin合并的意義

在頁面中任何地方嵌套或直接放入任何空標(biāo)簽，都不會(huì)影響原來的塊狀布局

3、自身margin合并的意義

可以避免不小心遺落或者生成的空標(biāo)簽影響排版和布局

阻止以上margin合并的發(fā)生 1、阻止margin-top的合并（滿足一個(gè)條件即可）

父元素設(shè)置為塊狀格式化上下文元素（比如overflow:hidden）

父元素設(shè)置border-top值

父元素設(shè)置padding-top值

父元素和第一個(gè)子元素之間添加內(nèi)聯(lián)元素進(jìn)行分隔

2、阻止margin-bottom合并

父元素設(shè)置為塊狀格式化上下文元素

父元素設(shè)置border-bottom值

父元素設(shè)置padding-bottom值

父元素和最后一個(gè)子元素之間添加內(nèi)聯(lián)元素進(jìn)行分隔

父元素設(shè)置height、min-height或max-height

3、阻止空標(biāo)簽margin合并

設(shè)置垂直方向的border

設(shè)置垂直方向的padding

里面添加內(nèi)聯(lián)元素

設(shè)置height或者min-height

以上需要注意的地方

以上情況的組合會(huì)產(chǎn)生更復(fù)雜的外邊距合并

即使某一外邊距為0，這些規(guī)則仍然適用，所以就算父元素的外邊距為0，還是會(huì)出現(xiàn)第二種情況

如果參與合并的外邊距中包含負(fù)值，合并后的外邊距等于最大的外邊距與最小的外邊距之和

如果所有參與合并的外邊距都為負(fù)值，合并后的外邊距等于最小的外邊距的值

2、深入理解margin:auto margin:auto的填充規(guī)則

如果一側(cè)定值，一側(cè)auto，則auto為剩余空間大小此時(shí).son的左邊距為20px、右邊距為80px

如果兩側(cè)auto，則平分剩余空間

margin:auto的隱藏用法

為塊級元素自適應(yīng)左中右對齊和內(nèi)聯(lián)元素使用text-align控制左中右對齊相呼應(yīng)

3、為什么容器定高、元素定高、margin:auto卻無法垂直居中

默認(rèn)文檔流是水平方向

解決方案

使用writing-mode改變文檔流的方向

.father{

height:200px;
writing-mode:vertical-lr;

}
.son{

height:100px;
margin:auto;

}

此時(shí).son就是垂直居中對齊的，但是水平方向就無法auto居中

絕對定位元素的margin:auto居中

.father{
    width:300px;
    background-color:#999;
    height:200px;
    position:relative;
 }
.son {
    width:200px;
    background-color:#ccc;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

IE8以及以上版本瀏覽器才支持，但卻是最好用的塊級元素垂直居中對齊方式