理解并運(yùn)用 CSS 的負(fù) margin 值

Alan 發(fā)布于2019-08-29 11:25 / 1324人閱讀

摘要：大多數(shù)情況下，我們采用的都是正數(shù)的值，可能有時(shí)候會(huì)用到負(fù)的值。但是，本文要說(shuō)明的就是，負(fù)的值并不是，這是正常范圍內(nèi)的寫(xiě)法。所以，具體行為按照以下幾種情況說(shuō)明。我們?yōu)樵O(shè)置了兩個(gè)的負(fù)值，分別是，以及。

本文樣式代碼采用 SCSS。

瀏覽器兼容性為 IE6+。

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

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

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

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

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

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

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

如果元素沒(méi)有設(shè)置浮動(dòng)并且沒(méi)有設(shè)置定位或者 position 屬性為 static 的情況下，對(duì)元素的 margin 設(shè)置負(fù)值會(huì)有以下的效果：

設(shè)置的 margin 的方向?yàn)?top 或者 left

當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。

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

設(shè)置的 margin 的方向?yàn)?bottom 或者 right

當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?bottom 或者 right 的時(shí)候，元素本身并不會(huì)移動(dòng)，元素后面的其他元素會(huì)往該元素的方向移動(dòng)相應(yīng)的距離，并且覆蓋在該元素上面。

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

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

第二種情況：元素沒(méi)有設(shè)置浮動(dòng)且 position 為 relative

如果元素沒(méi)有設(shè)置浮動(dòng)，但是設(shè)置了相對(duì)定位，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：

設(shè)置的 margin 的方向?yàn)?top 或者 left

當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素也會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。

設(shè)置的 margin 的方向?yàn)?bottom 或者 right

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

第三種情況：元素沒(méi)有設(shè)置浮動(dòng)且 position 為 absolute

如果元素沒(méi)有設(shè)置浮動(dòng)，但是設(shè)置了絕對(duì)定位，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：

設(shè)置的 margin 的方向?yàn)?top 或者 left

當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素也會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。

設(shè)置的 margin 的方向?yàn)?bottom 或者 right

由于設(shè)置絕對(duì)定位的元素已經(jīng)脫離了標(biāo)準(zhǔn)文檔流，所以，設(shè)置 margin-right/bottom 對(duì)后面的元素并沒(méi)有影響。

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

肯定沒(méi)有既設(shè)置了浮動(dòng)又設(shè)置絕對(duì)定位的情況，那樣太荒唐了。
設(shè)置了浮動(dòng)的元素，再設(shè)置 postion: relative; 的話，元素的行為和多帶帶設(shè)置 float 是一樣的。

對(duì)于設(shè)置了浮動(dòng)的元素，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：

如果設(shè)置的 margin 的方向與浮動(dòng)的方向相同，那么，元素會(huì)往對(duì)應(yīng)的方向移動(dòng)對(duì)應(yīng)的距離。

比如：

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

該元素則會(huì)向右移動(dòng) 100px。

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

比如：

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

位于該元素左邊的元素則會(huì)向右移動(dòng) 100px，同時(shí)覆蓋在該元素上。

如果后面的元素也設(shè)置了浮動(dòng)的話，我們以一個(gè)具體的例子來(lái)說(shuō)明。

.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è)置了浮動(dòng)，在 .left 上設(shè)置了 margin-right: -300px;，那么，.right 會(huì)向左移動(dòng) 300px，從而覆蓋在 .left 上。這種行為與沒(méi)有既沒(méi)有設(shè)置浮動(dòng)也沒(méi)有設(shè)置定位的表現(xiàn)類(lèi)似。

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

半遮擋的標(biāo)題

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

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

但是，按照我們現(xiàn)在所說(shuō)的，其實(shí)很簡(jiǎn)單就能實(shí)現(xiàn)這個(gè)效果。

這里只寫(xiě)了主要部分的代碼。

Hey This is title!
Hah! This is content.

.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è)置了兩個(gè) margin 的負(fù)值，分別是 margin-bottom: -30px;，以及 margin-left: -20px;。

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

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

簡(jiǎn)單的一列定寬的兩列流式布局

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

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

唯一需要注意的地方就是設(shè)置了 100% 寬度的元素上的 margin 負(fù)值的絕對(duì)值一定要和定寬的元素的寬度相同。

兩邊固定，中間自適應(yīng)的三列布局

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

我們此處就以雙飛翼布局來(lái)作示例。

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

此處我們沒(méi)有把 center 放在中間，具體原因后面會(huì)解釋。

然后，我們?cè)O(shè)置這三列都浮動(dòng)：

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

同時(shí)為他們指定寬度：

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

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

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

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

margin-left: -100%;

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

margin-left: -400px;

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

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

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

這個(gè)其實(shí)涉及到元素的堆疊順序的知識(shí) (這里就不詳細(xì)講解了，后面有時(shí)間的話專(zhuān)門(mén)拿一篇文章來(lái)講解吧)，此處簡(jiǎn)單說(shuō)明一下。

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

我們要讓 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;
    }
}

References

margin-properties | W3C

The Definitive Guide to Using Negative Margins

雙飛翼布局和圣杯布局的對(duì)比