margin的解析邏輯

在 margin 中 top、right、bottom、left 的參考線并不一致為一類，而是分為了兩類參考線，top 和 left 的參考線屬于一類，right 和bottom 的參考線屬于另一類。

那他們到底各以什么為參考線呢？top 以 containing block 的 content 上邊或者垂直上方相連元素 margin 的下邊為參考線垂直向下位移；

left 以 containing block 的 content 左邊或者水平左方相連元素 margin 的右邊為參考線水平向右位移。

right 以元素本身的 border 右邊為參考線水平向右位移；

bottom 以元素本身的border 下邊為參考線垂直向下位移。

從上我們可以看到 top 和 left 都是以外元素為參考，而 right 和 bottom 以本元素為參考。

上面的位移方向是指 margin 數(shù)值為正值時(shí)候的情形，如果是負(fù)值則位移方向相反。

物理大小指的是除去 margin，也就是包含 border 以內(nèi)的 box 大小，而邏輯大小，則是 box 通過 margin 解析規(guī)則解析后得到的大小（這或許可以解釋為什么IE5會錯誤解析盒模型）。

結(jié)論：（當(dāng)元素設(shè)置寬度之后）

box 最后的顯示大小等于 box 的 border 及 border 內(nèi)的大小加上正的 margin 值。

而負(fù)的 margin 值不會影響 box 的實(shí)際大小，如果是負(fù)的 top 或 left 值會引起 box 的向上或向左位置移動，

如果是 bottom 或 right 只會影響下面 box 的顯示的參考線。

 如果元素沒有設(shè)置寬度，則margin負(fù)值會改變box的寬度

來自：

http://www.planabc.net/2007/03/18/css_attribute_margin/

http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html

總結(jié)

以上是生活随笔為你收集整理的margin-----总结----解析逻辑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。