margin系列之與相對偏移的異同
原文地址:margin系列之與相對偏移的異同 by @doyoe
也許我們是一樣的
可能大家都用會 margin
或者相對偏移的 top, right, bottom, left
來做一些類似元素偏移的事,其實我也會。這回我們只聊 relative
下的 top, right, bottom, left
。
比如說我們想讓一個 div 向下偏移 50 個畫素,通常會這樣:
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 個畫素的需求。來看看 DEMO1
: margin-top vs. relative top
其實它們真的有相似的地方
從上面的例子,可以發現不論是 margin-top
還是 relative top
都是以自身作為參照物進行偏移的。
順帶說一下 absolute
偏移相對的是包含塊,並且其偏移值是從包含塊的 padding
區域開始計算。
但它們真的不一樣,我們來看看規範怎麼說:
margin:
原文:Margins in CSS serve to add both horizontal and vertical space between boxes.
翻譯:CSS中的margin用來新增盒子之間的水平和垂直間隙。
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.
翻譯:一個元素的position屬性值如果不為static則發生定位。定位元素會產生定位盒,並且會根據 top, right, bottom, left 這4個物理屬性進行排版佈局。
意思很明白,margin
是用來增加自身與它人之間的空白,而 top, right, bottom, left
是用來對自身進行排版,作用完全不同。
也就是說 margin
是互動的,因為它要影響它人;而 top, right, bottom, left
是孤獨的,它只是自己一個人玩,不影響它人。
回到之前那個例子
在 DEMO1
中,我們看到2個方法都可以做到向下偏移50px,不過它們的意義不太一樣。
margin的case: 讓該div的頂部與其相鄰的元素(這裡即其包含塊)留有50px的空白。
top的case: 讓該div距離其包含塊頂部邊緣50px,因為是 relative
,所以這裡是距離div自己的頂部邊緣。
我們大膽假設一下
如果我們設定 margin-bottom
和 bottom
的值也為50px,它們的表現將完全不一樣,你覺得呢? 恩,試試:
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>
驗證猜想的時刻到了,來看看 DEMO2
: 對margin-bottom和bottom的表現猜想
結果有出乎你的意料嗎?好吧,不論怎麼,解釋下為什麼會這樣?
前面我們說過 margin
是用來增加自身與它人之間的間隙,所以它距包含塊底部有50px,這應該能理解?那為什麼 bottom
會跑到上面去?相信仔細看了之前的描述,你應該知道。因為它要相對自己的底部邊緣有50px,恩,不是-50px,所以它等於是向上偏移了50px,很簡單,不是嗎?
還有一個細節你注意到了嗎?bottom
沒有撐開它的包含塊,仔細看看它的包含塊的背景色區域。這正好也驗證了之前說的 top, right, bottom, left
是孤獨的,它只是自己一個人玩,不影響它人。
孤獨患者
我們將 DEMO1
稍改改,為其加上一點上下文,再看看結果:
Case 1:
#demo .margin-top p{
margin-top: 50px;
}
Case 2:
#demo .relative-top p{
position:relative;
top: 50px;
}
HTML:
<div id="demo">
<div class="margin-top">
<p>我是margin-top:50px</p>
我是一段隨便什麼上下文
</div>
<div class="relative-top">
<p>我是relative top:50px</p>
我是一段隨便什麼上下文
</div>
</div>
迫不及待的要看看實際例子了,不是麼?DEMO3
: 再次驗證一下top, right, bottom, left是孤獨患者
至此可以再次說明 top, right, bottom, left
真的和其上下文一毛錢關係都沒有,絕對的孤單患者。
所以 margin
和 top, right, bottom, left
分別要在什麼場景使用,應該可以有考量的依據了,不是麼?enjoy it.
似乎還漏了點啥
差點就這麼結篇了,想起還有點遺漏的地方。
當position為relative時,如果top和bottom都是auto,則它們的計算值是0,right和left亦然;如果top和bottom其中一個為auto,則auto相當於另一個的負值,即top = -bottom,right和left亦然;如果top和bottom的值都不為auto,則忽略bottom,如果right和left的值都不為auto,則忽略right。
好吧,不得不再寫個例子:DEMO4
: top, right, bottom, left詳述
至於margin,就留給大家思考一下也不錯 ^_^
enjoy it again.
可參考:
- http://dev.w3.org/csswg/css-box/#the-margin-properties
- http://dev.w3.org/csswg/css-position/#box-offsets-trbl
margin系列文章:
相關文章
- Margin 的特異之處
- margin系列之bug巡演
- margin系列之佈局篇
- margin系列之bug巡演(二)
- margin系列之bug巡演(三)
- margin系列之keyword auto
- margin系列之內秀篇
- margin系列之內秀篇(二)
- C++之new、delete 與malloc、free的異同C++delete
- JavaScript獲取元素相對於document的偏移量JavaScript
- session與cookie的異同SessionCookie
- margin系列之百分比
- JSF與Struts的異同JS
- [譯] 同中有異的 Webpack 與 RollupWeb
- oracle與infomix異同點Oracle
- 大廠面試題:ReentrantLock 與 synchronized異同點對比面試題ReentrantLocksynchronized
- 我理解的foreach, for in, for of 之間的異同
- Objective-C 與 C++ 的異同ObjectC++
- JavaScript中var與let的異同點JavaScript
- 編譯器GCC與Clang的異同編譯GC
- JAVA與C++的多型異同JavaC++多型
- 效能測試常用工具對比:Jmeter與LoadRunner的異同JMeter
- 有同也有異,對比BAT的運維文化BAT運維
- 內容管理與知識管理的異同
- Spring系列之JDBC對不同資料庫異常如何抽象的?SpringJDBC資料庫抽象
- 策略模式和模板方法同與異模式
- 執行時異常與一般異常有何異同?
- 有關“抽象類”和“介面”的異同之處?抽象
- 元素的相對定位與絕對定位
- rman之同平臺異機恢復
- 【譯】Object與Map的異同及使用場景Object
- 【譯】Array與Set的異同及使用場景
- 遊戲音樂與影視音樂的異同遊戲
- 深入探索Factory模式與Prototype模式的異同 (轉)模式
- Tensor與tensor深入分析與異同
- dart系列之:dart語言中的異常Dart
- PostgreSQLin與=any的SQL語法異同與效能優化SQL優化
- margin系列之外邊距摺疊