CSS盒模型中品嚣，margin是我們非常熟悉的一個屬性，大多數(shù)情況下钧大，我們采用的都是正數(shù)的 margin 值翰撑，可能有時候會用到負的 margin 值。在我們的印象中啊央，負的 margin 值就類似于瀏覽器的hack 一樣眶诈，不被人接受。但是瓜饥，本文要說明的就是逝撬，負的 margin 值并不是 hack，這是正常范圍內(nèi)的寫法乓土。
根據(jù) W3C宪潮，margin 是能夠接受負值的，只是在具體實現(xiàn)上有一些區(qū)別趣苏。那么狡相，設(shè)置margin為負值究竟會是什么樣的效果呢？
margin為負值時產(chǎn)生的影響：
1拦键、對于自身的影響
當(dāng)static(非浮動谣光、非定位）元素的margin-top/margin-left被賦予負值時，元素將被拉進指定的方向芬为。
但如果你設(shè)置margin-bottom/right為負數(shù)萄金，元素并不會如你所想的那樣向下/右移動，而是將后續(xù)的元素拖拉進來媚朦，覆蓋本來的元素氧敢。
如果沒有設(shè)定width屬性，設(shè)定負margin-left/right會將元素拖向?qū)?yīng)的方向询张，并增加寬度孙乖，此時的margin的作用就像padding一樣。
2、對文檔流的影響
元素如果用了margin-left/margin-top時唯袄，元素自身會被拉向左/向上進行偏移弯屈，效果類似與position：relative。與之不同的是恋拷，在其后面的元素會補位资厉，也就是后面的行內(nèi)元素會緊貼在此元素的之后。
元素如果用了margin-right/margin-bottom時蔬顾，元素視覺位置不變宴偿，但其后（下面/右邊）的元素會被拉向此元素，相對此元素進行偏移并覆蓋此元素诀豁。
不脫離文檔流不使用float的話窄刘，負margin元素是不會破壞頁面的文檔流。
3舷胜、對浮動元素的影響
負margin會改變浮動元素的顯示位置娩践。
4、對絕對定位的影響
對于絕對定位元素逞带，負margin會基于其絕對定位坐標(biāo)再偏移欺矫，
唯一的缺點就是你必須知道這個覺得定位元素寬度的和高度才能并設(shè)置負margin值使其居中瀏覽器窗口，若對于不確定寬度和高度可以用transform: translate3d(-50%,-50%,0);
margin負值在頁面布局中有哪些應(yīng)用展氓？
1穆趴、左右固定，中間自適應(yīng)（雙飛翼）
2遇汞、去除列表右邊框
3未妹、多列等高
4、負邊距+定位：水平垂直居中
雙飛翼demo：https://ptteng.github.io/PPT/demo/css-08-margin%20apply/margin-demo6.html
多列等高demo：https://ptteng.github.io/PPT/demo/css-08-margin%20apply/margin-demo8.html
參考文獻：
margin為負值產(chǎn)生的影響和常見布局應(yīng)用
