margin為啥可以取負數(shù)？

為了實現(xiàn)一些特別的布局效果。

margin為負值如何理解？

margin本意是兩個盒子之間的間距，那么margin為負值就是說兩個盒子重疊了？那只有一個盒子怎么辦？

假設A-B橫排放置，然后B是我們的研究對象，B的margin-left為-10.瀏覽器會怎么處理？瀏覽器會把B向左移動10px，如果設置B的margin-right為-10.這時就不是動B了，而是把C左移動10px。就這么個邏輯。

image.png

margin為負對float的影響

A元素不浮動時。

margin-right就沒啥影響了，因為就不在同一行。

<style>
#mydiv1 { margin-right:-100px;}
</style>

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

結(jié)果如圖

image.png

A元素浮動時

兩個div并排排列，margin發(fā)揮作用。

<style>
    /* A negative margin is applied opposite the float */
#mydiv1 {float:left; margin-right:-100px;}
</style>

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

結(jié)果

image.png

符合上面說的。給A設置的右邊-100的屬性，表現(xiàn)是B左移100px。

再看

<style>
#mydiv1 {float:left; margin-left:-100px;}
</style>

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

左邊是負自己移動，右邊是負鄰居移動。
因此結(jié)果

image.png

![Uploading image_542898.png . . .]