本文樣式代碼采用 SCSS。
瀏覽器兼容性為 IE6+。

你的網(wǎng)頁中，不可能沒有使用過 margin。大多數(shù)情況下，我們采用的都是正數(shù)的 margin 值，可能有時候會用到負的 margin 值。在我們的印象中，負的 margin 值就類似于瀏覽器的 hack 一樣，不被人接受。但是，本文要說明的就是，負的 margin 值并不是 hack，這是正常范圍內(nèi)的寫法。

Negative values for margin properties are allowed, but there may be implementation-specific limits. —— W3C

根據(jù) W3C，margin 是能夠接受負值的，只是在具體實現(xiàn)上有一些區(qū)別。

那么，設(shè)置 margin 為負值究竟會是什么樣的效果呢？

與設(shè)置正值不同，margin 設(shè)置負值需要根據(jù)設(shè)置的方向以及元素是否浮動以及其定位方式來判斷最終的行為。

所以，具體行為按照以下幾種情況說明。

第一種情況：元素沒有設(shè)置浮動且沒有設(shè)置定位或者 position 為 static

如果元素沒有設(shè)置浮動并且沒有設(shè)置定位或者 position 屬性為 static 的情況下，對元素的 margin 設(shè)置負值會有以下的效果：

設(shè)置的 margin 的方向為 top 或者 left

當設(shè)置負值的 margin 的方向為 top 或者 left 的時候，元素會按照設(shè)置的方向移動相應的距離。

比如，設(shè)置 margin-left: -100px;。 那么，元素會往左移動 100px。對于設(shè)置 margin-top 也是一樣的道理。

設(shè)置的 margin 的方向為 bottom 或者 right

當設(shè)置負值的 margin 的方向為 bottom 或者 right 的時候，元素本身并不會移動，元素后面的其他元素會往該元素的方向移動相應的距離，并且覆蓋在該元素上面。

比如，設(shè)置 margin-right: -100px;。那么，元素本身并不會移動，后面的元素會向左移動 100px 到該元素上。對于設(shè)置 margin-bottom 也是同樣的道理。

同時，在元素不指定寬度的情況下，如果設(shè)置 margin-left 或者 margin-right 為負值的話，會在元素對應的方向上增加其寬度。效果就和設(shè)置 padding-left 或者 padding-right 一樣。

第二種情況：元素沒有設(shè)置浮動且 position 為 relative

如果元素沒有設(shè)置浮動，但是設(shè)置了相對定位，設(shè)置 margin 為負值的時候，表現(xiàn)如下：

設(shè)置的 margin 的方向為 top 或者 left

當設(shè)置負值的 margin 的方向為 top 或者 left 的時候，元素也會按照設(shè)置的方向移動相應的距離。

設(shè)置的 margin 的方向為 bottom 或者 right

當設(shè)置 margin-bottom/left 的時候，元素本身也不會移動，元素后面的其他元素也會往該元素的方向移動相應的距離，但是，該元素會覆蓋在后面的元素上面 (當然，此處說的情況肯定是后面的元素沒有設(shè)置定位以及 z-index 的情況)。

第三種情況：元素沒有設(shè)置浮動且 position 為 absolute

如果元素沒有設(shè)置浮動，但是設(shè)置了絕對定位，設(shè)置 margin 為負值的時候，表現(xiàn)如下：

設(shè)置的 margin 的方向為 top 或者 left

當設(shè)置負值的 margin 的方向為 top 或者 left 的時候，元素也會按照設(shè)置的方向移動相應的距離。

設(shè)置的 margin 的方向為 bottom 或者 right

由于設(shè)置絕對定位的元素已經(jīng)脫離了標準文檔流，所以，設(shè)置 margin-right/bottom 對后面的元素并沒有影響。更多精彩內(nèi)容關(guān)注微信公眾號：全棧開發(fā)者中心（admin10000_com）

第四種情況：元素設(shè)置了浮動

肯定沒有既設(shè)置了浮動又設(shè)置絕對定位的情況，那樣太荒唐了。
設(shè)置了浮動的元素，再設(shè)置 postion: relative; 的話，元素的行為和單獨設(shè)置 float 是一樣的。

對于設(shè)置了浮動的元素，設(shè)置 margin 為負值的時候，表現(xiàn)如下：

如果設(shè)置的 margin 的方向與浮動的方向相同，那么，元素會往對應的方向移動對應的距離。

比如：

.elem {
    float: right;
    margin-left: -100px;
}

該元素則會向右移動 100px。

如果設(shè)置 margin 的方向與浮動的方向相反，則元素本身不動，元素之前或者之后的元素會向鈣元素的方向移動相應的距離。

比如：

.elem { float: right; margin-left: -100px; }

位于該元素左邊的元素則會向右移動 100px，同時覆蓋在該元素上。

如果后面的元素也設(shè)置了浮動的話，我們以一個具體的例子來說明。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

.container {
    min-height: 300px;
    margin: 30px auto;
    overflow: hidden;
    border: 1px solid #000000;

    .left {
        float: left;
        width: 400px;
        height: 200px;
        margin-right: -300px;
        background: purple;
    }

    .right {
        float: left;
        width: 300px;
        height: 200px;
        background: #cccccc;
    }
}

.left 和 .right 都設(shè)置了浮動，在 .left 上設(shè)置了 margin-right: -300px;，那么，.right 會向左移動 300px，從而覆蓋在 .left 上。這種行為與沒有既沒有設(shè)置浮動也沒有設(shè)置定位的表現(xiàn)類似。

到此，我們把設(shè)置負 margin 的各種情況以及在各種情況下的表現(xiàn)都大概了解了一遍。那么，我們真正運用到實際中會是什么樣子呢。

半遮擋的標題

原諒我措辭不好，大概就是下圖的效果：

按照一般的思想，肯定是直接給 title 設(shè)置絕對定位，然后再將其調(diào)整過去。

但是，按照我們現(xiàn)在所說的，其實很簡單就能實現(xiàn)這個效果。

這里只寫了主要部分的代碼。

<div class="title">Hey This is title!</div>
<div class="content">Hah! This is content.</div>

.title {
    position: relative;
    width: 200px;
    height: 60px;
    margin-bottom: -30px;
    margin-left: -20px;
    background: #000000;
}

.content {
    max-width: 800px;
    height: 400px;
    padding: 0 50px;
    background: yellow;
}

我們?yōu)?title 設(shè)置了兩個 margin 的負值，分別是 margin-bottom: -30px;，以及 margin-left: -20px;。

設(shè)置 margin-bottom 是為了讓 content 向上移動，設(shè)置 margin-left 是為了讓 title 向左移動一小段距離。

還有個需要注意的地方就是，需要給 title 設(shè)置 position: relative;，根據(jù)我們的第二種情況所說的，這樣，才能保證 title 覆蓋在 content 之上。

簡單的一列定寬的兩列流式布局

根據(jù)我們的最后一種情況，通過設(shè)置 margin 為負值，我們可以很容易的實現(xiàn)一列定寬的兩列流式布局。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

.left {
    float: left;
    width: 100%;
    height: 200px;
    margin-right: -300px;
    background: purple;
}
.right {
    float: left;
    width: 300px;
    height: 200px;
    background: #cccccc;
}

唯一需要注意的地方就是設(shè)置了 100% 寬度的元素上的 margin 負值的絕對值一定要和定寬的元素的寬度相同。更多精彩內(nèi)容關(guān)注微信公眾號：全棧開發(fā)者中心（admin10000_com）

兩邊固定，中間自適應的三列布局

這是一個很老的話題了，以前也有各種實現(xiàn)的方式，比如雙飛翼布局，或者圣杯布局。

我們此處就以雙飛翼布局來作示例。

先設(shè)置頁面結(jié)構(gòu)：

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

此處我們沒有把 center 放在中間，具體原因后面會解釋。

然后，我們設(shè)置這三列都浮動：

.left,
.right,
.center {
    float: left;
    height: 500px;
}

同時為他們指定寬度：

.left {
    width: 300px;
    background: #000000;
}

.right {
    width: 400px;
    background: #00FFFF;
}

.center {
    width: 100%;
    background: #93c759;
}

現(xiàn)在我們要讓 left 在左邊，相當于就是讓它覆蓋在 center 的上面，所以，只需要這樣一句：

margin-left: -100%;

同時，要讓 right 在右邊，同理，這樣設(shè)置：

margin-left: -400px;

注意，此處的 margin 值的絕對值與 right 的寬度值相同。

其實，這樣設(shè)置，我們的三列布局就基本完成了。

那么，我們?yōu)槭裁匆?center 放在 left 和 right 之前呢？

這個其實涉及到元素的堆疊順序的知識 (這里就不詳細講解了，后面有時間的話專門拿一篇文章來講解吧)，此處簡單說明一下。

由于我們的三列都設(shè)置了浮動，所以，從某種意義上說，它們?nèi)齻€是在同一個平面的 (相當于z-index 相同)，那么，這里就不能根據(jù) CSS 來判斷堆疊順序了。所以，此處的 HTML 結(jié)構(gòu)就決定了它們的堆疊順序：所謂后來居上。

我們要讓 left 在 center 之上，所以，肯定需要讓 left 元素放在 center 之前。

所以，三列布局完整的 SCSS 代碼如下：

.container {
    overflow: hidden;

    .left,
    .right,
    .center {
        float: left;
        height: 500px;
    }

    .left {
        width: 300px;
        margin-left: -100%;
        background: #000000;
    }

    .right {
        width: 400px;
        margin-left: -400px;
        background: #00FFFF;
    }

    .center {
        width: 100%;
        background: #93c759;
    }
}