一、判定邊界相鄰
?文檔流中元素的按塊元素從上到下，內(nèi)聯(lián)元素從左至右依次流入頁面，一個(gè)元素流入時(shí)，會(huì)按照與上一個(gè)元素的判定邊界相鄰流入頁面，關(guān)于此處所說判定邊界，并不是單指border，而是margin影響后，后一個(gè)元素流入時(shí)的判定邊界（正margin則border加上該值，負(fù)margin則減去該值），如下例所示：
- 元素1有margin-right=10px，元素2無margin-left:
?元素2流入時(shí)，其判定邊界（border+0=border）與元素1的判定邊界（border+10px）相鄰。所以中間即是元素1的margin-right。
- 元素1有margin-right=10px，元素2有margin-left=10px:
?元素2流入時(shí)，其判定邊界（border+10px）與元素1的判定邊界（border+10px）相鄰，中間的20px即為元素1的margin-right和元素2的margin-left。
二、負(fù)邊距改變?cè)卦谖臋n流中位置
?當(dāng)margin值為負(fù)數(shù)時(shí)，元素流入依然遵循以上原則，從而可以改變?cè)卦谖臋n流中位置。
- 元素1margin-right:-10px;元素2無margin-left：
?圖中，看似元素1寬度減少（10px）,實(shí)則不然，設(shè)置元素2的opacity:0.5:
?顯然，元素1寬度并未減小，而是元素2流入頁面時(shí)，元素2的判定邊界（border+0px）與元素1的判定邊界（border-10px）相鄰，所以表現(xiàn)為元素2在流中向左移動(dòng)了10px,元素1并未變窄，只是有10px的領(lǐng)域變成了與元素2的共享領(lǐng)域。
?這成為了負(fù)邊距在布局中的一個(gè)應(yīng)用，即改變?cè)匚恢茫ㄗⅲ号cposition:relative不同，負(fù)邊距改變位置的元素不會(huì)再占據(jù)原來位置）；
三、負(fù)邊距增加元素寬度
?除了改變?cè)匚恢弥猓?fù)邊距在布局中的另外一項(xiàng)應(yīng)用就是增加元素寬度。
-
外層div固定寬度，內(nèi)層div不設(shè)定width、margin
外層固定，內(nèi)層不設(shè)width、margin - 內(nèi)層div，margin:0 50px:
?此時(shí)內(nèi)層div左右各收縮50px，表現(xiàn)為元素縮小。
-
內(nèi)層div,margin:0 -50px:
內(nèi)層div,margin:0 -50px
?此時(shí)，依然判斷邊界相鄰，內(nèi)層div的判定邊界（border-50px）與外層div的判斷邊界（border+0）相鄰，表現(xiàn)為內(nèi)層div變寬，且超出容器寬度。
?這是負(fù)邊距在布局中的第二種應(yīng)用，即使元素變寬。
