負(fù)值margin相對少見藏澳，這里對它進(jìn)行系統(tǒng)介紹下翔悠。
（一）在非浮動元素上

非浮動元素各個(gè)方向上的負(fù)值margin

在非浮動元素上設(shè)置負(fù)值margin，效果按元素本身尺寸是否確定分為兩類：
（1）元素本身尺寸確定双炕，按 margin 的方向是 left妇斤、top 還是 right、bottom又分為兩類：
（1-1）設(shè)置 margin-left 或 margin-top荸恕，元素會朝著左或者上移動相應(yīng)的距離融求。

<style>
.inner1{
            margin-left:-50px;
        }
</style>
<div class="outer">
    <div class="square inner1"></div>
</div>

非浮動定寬元素設(shè)置margin-left:-50px

(1-2) 設(shè)置 margin-right 或 margin-bottom双肤，元素A本身并不會移動钮惠，其尺寸也不會改變素挽，但是A的后續(xù)元素會向左或向上移動相應(yīng)距離，從而壓蓋A缩赛。如下圖所示撰糠，div1
設(shè)置 margin-bottom:-50px 后阅酪，其自身位置與尺寸雖然并未變化，但是div2卻向上移動了 50px砚尽，從而壓蓋 div1一半?yún)^(qū)域辉词。（猜測是 所有元素都是矩形盒子瑞躺，margin 確定的是盒子的最外層邊界兴想，其為正值的時(shí)候襟企，理解起來很直觀狮含，就元素很害羞几迄，需要安全距離，別的元素必須保持這個(gè)距離木羹；但是在 right 和 bottom 方向上解孙，其值為負(fù)的時(shí)候，仿佛是朝內(nèi)縮小了盒子的最外層邊界脐瑰，于是附近兄弟元素就可以好奇地湊過來了）

壓蓋1

壓蓋2

（2）元素本身尺寸未確定
（2-1）寬度未定
這時(shí)設(shè)置 margin-left 或 margin-right 為負(fù)值苍在，都會導(dǎo)致元素本身寬度增加相應(yīng)的值荠商。如下圖莱没，div3 本身寬度未定饰躲，默認(rèn)是父元素寬度100%，設(shè)置 margin-left 為 -100px后，它的寬度就朝著左邊增加了100px.

image.png

（二）在浮動元素上
（1）div1向左浮動奢浑，且設(shè)置 margin-right 為負(fù)值腋腮，div2是非浮動元素雀彼，效果如圖所示，很意外吧即寡，div1 與 div2 位置上重合了（原本尺寸一致）徊哑，但是 div2中的內(nèi)容顯示在div1的下一行。

image.png

image.png

（2）div1 與 div2 均向左浮動聪富，div1設(shè)置 margin-right: -50px 莺丑。效果如圖，對 div2 而言墩蔓，div1空間位置不變梢莽，但是最外層右邊界如同向左縮了 50px 一樣，因此 div2 壓蓋了 div1 部分區(qū)域奸披。而 div1 自身實(shí)際尺寸與內(nèi)容仍維持不變，就像div2不存在一樣源内。

image.png

div1 與 div2 均向左浮動葡粒，若只對 div2 設(shè)置 margin-left: -50px ，也能達(dá)到與上圖一致的效果膜钓。這可用來處理這種情況：幾個(gè)浮動元素在同一行排列不下時(shí)嗽交，可對浮動元素應(yīng)用 margin-left 或 margin-right 負(fù)值，使其向左或向右移動颂斜，留出空間給其他浮動元素夫壁，這樣就能排成一行了。

---------------------------------分割線-----------------------------------------------------------------
好了沃疮，現(xiàn)在說下負(fù)值margin在圣杯布局上的應(yīng)用盒让。所謂圣杯布局，一般有3欄司蔬，左右各一欄邑茄，寬度固定，中間欄（呈現(xiàn)頁面主要內(nèi)容）自適應(yīng)俊啼，而且要求先加載中間欄肺缕。
效果如圖：

圣杯布局效果圖

3-1-左欄 margin-left:-左欄寬度

3-2-左欄 margin-left:-中間欄寬度

3-3 左欄回到上一行之前的向左移動