margin系列之與相對(duì)偏移的異同

margin系列之與相對(duì)偏移的異同

原作者：doyoe
原文鏈接：http://blog.doyoe.com/2013/12/02/css/margin%E7%B3%BB%E5%88%97%E4%B9%8B%E4%B8%8E%E7%9B%B8%E5%AF%B9%E5%81%8F%E7%A7%BB%E7%9A%84%E5%BC%82%E5%90%8C/

也許我們是一樣的

可能大家都用會(huì) margin 或者相對(duì)偏移的 top, right, bottom, left 來(lái)做一些類(lèi)似元素偏移的事，其實(shí)我也會(huì)。這回我們只聊 relative 下的 top, right, bottom, left 。

比如說(shuō)我們想讓一個(gè) div 向下偏移 50 個(gè)像素，通常會(huì)這樣：

Case 1:

#demo .margin-top{
    margin-top: 50px;
}

Case 2:

#demo .relative-top{
    position:relative;
    top: 50px;
}

HTML:

<div id="demo">
    <div class="margin-top">我是margin-top:50px</div>
    <div class="relative-top">我是relative top:50px</div>
</div>

上述2種方式，我們都可以完成 div 向下偏移 50 個(gè)像素的需求。來(lái)看看 DEMO1: margin-top vs. relative top

其實(shí)它們真的有相似的地方

從上面的例子，可以發(fā)現(xiàn)不論是 margin-top 還是 relative top 都是以自身作為參照物進(jìn)行偏移的。

順帶說(shuō)一下 absolute 偏移相對(duì)的是包含塊，并且其偏移值是從包含塊的 padding 區(qū)域開(kāi)始計(jì)算。

但它們真的不一樣，我們來(lái)看看規(guī)范怎么說(shuō)：

margin:

原文：Margins in CSS serve to add both horizontal and vertical space between boxes.

翻譯：CSS中的margin用來(lái)添加盒子之間的水平和垂直間隙。

top, right, bottom, left:

原文：An element is said to be positioned if its ‘position’ property has a value other than ‘static’. Positioned elements generate positioned boxes, and may be laid out according to the following four physical properties: top, right, bottom, left.

翻譯：一個(gè)元素的position屬性值如果不為static則發(fā)生定位。定位元素會(huì)產(chǎn)生定位盒，并且會(huì)根據(jù) top, right, bottom, left 這4個(gè)物理屬性進(jìn)行排版布局。

意思很明白，margin 是用來(lái)增加自身與它人之間的空白，而 top, right, bottom, left 是用來(lái)對(duì)自身進(jìn)行排版，作用完全不同。
也就是說(shuō) margin 是互動(dòng)的，因?yàn)樗绊懰?；?top, right, bottom, left是孤獨(dú)的，它只是自己一個(gè)人玩，不影響它人。

回到之前那個(gè)例子

在 DEMO1 中，我們看到2個(gè)方法都可以做到向下偏移50px，不過(guò)它們的意義不太一樣。
margin的case: 讓該div的頂部與其相鄰的元素（這里即其包含塊）留有50px的空白。

top的case: 讓該div距離其包含塊頂部邊緣50px，因?yàn)槭?relative ，所以這里是距離div自己的頂部邊緣。

我們大膽假設(shè)一下

如果我們?cè)O(shè)置 margin-bottom 和 bottom 的值也為50px，它們的表現(xiàn)將完全不一樣，你覺(jué)得呢？ 恩，試試：

Case 1:

#demo .margin-bottom{
    margin-bottom: 50px;
}

Case 2:

#demo .relative-bottom{
    position: relative;
    bottom: 50px;
}

HTML:

<div id="demo">
    <p class="margin-bottom">我是margin-bottom:50px</p>
    <p class="relative-bottom">我是relative bottom:50px</p>
</div>

驗(yàn)證猜想的時(shí)刻到了，來(lái)看看 DEMO2: 對(duì)margin-bottom和bottom的表現(xiàn)猜想

結(jié)果有出乎你的意料嗎？好吧，不論怎么，解釋下為什么會(huì)這樣？

前面我們說(shuō)過(guò) margin 是用來(lái)增加自身與它人之間的間隙，所以它距包含塊底部有50px，這應(yīng)該能理解？那為什么 bottom會(huì)跑到上面去？相信仔細(xì)看了之前的描述，你應(yīng)該知道。因?yàn)樗鄬?duì)自己的底部邊緣有50px，恩，不是-50px，所以它等于是向上偏移了50px，很簡(jiǎn)單，不是嗎？
還有一個(gè)細(xì)節(jié)你注意到了嗎？bottom 沒(méi)有撐開(kāi)它的包含塊，仔細(xì)看看它的包含塊的背景色區(qū)域。這正好也驗(yàn)證了之前說(shuō)的 top, right, bottom, left 是孤獨(dú)的，它只是自己一個(gè)人玩，不影響它人。
孤獨(dú)患者

我們將 DEMO1 稍改改，為其加上一點(diǎn)上下文，再看看結(jié)果：

Case 1:

#demo .margin-top p{
    margin-top: 50px;
}

Case 2:

#demo .relative-top p{
    position:relative;
    top: 50px;
}

HTML:

```html:

迫不及待的要看看實(shí)際例子了，不是么？`DEMO3`: [再次驗(yàn)證一下top, right, bottom, left是孤獨(dú)患者](http://demo.doyoe.com/css/margin/margin-top-vs-relative-top-2.htm)

至此可以再次說(shuō)明 `top, right, bottom, left` 真的和其上下文一毛錢(qián)關(guān)系都沒(méi)有，絕對(duì)的孤單患者。

所以 `margin 和 top, right, bottom, left` 分別要在什么場(chǎng)景使用，應(yīng)該可以有考量的依據(jù)了，不是么？enjoy it.

## 似乎還漏了點(diǎn)啥

差點(diǎn)就這么結(jié)篇了，想起還有點(diǎn)遺漏的地方。

當(dāng)position為relative時(shí)，如果top和bottom都是auto，則它們的計(jì)算值是0，right和left亦然；如果top和bottom其中一個(gè)為auto，則auto相當(dāng)于另一個(gè)的負(fù)值，即top = -bottom，right和left亦然；如果top和bottom的值都不為auto，則忽略bottom，如果right和left的值都不為auto，則忽略right。

好吧，不得不再寫(xiě)個(gè)例子：`DEMO4`: [top, right, bottom, left詳述](http://demo.doyoe.com/css/margin/top-right-bottom-left.htm)

至于margin，就留給大家思考一下也不錯(cuò) ^_^
enjoy it again.
## 可參考：
- http://dev.w3.org/csswg/css-box/#the-margin-properties
- http://dev.w3.org/csswg/css-position/#box-offsets-trbl