margin为啥可以取负数?
为了实现一些特别的布局效果。
margin为负值如何理解?
margin本意是两个盒子之间的间距,那么margin为负值就是说两个盒子重叠了?那只有一个盒子怎么办?
假设A-B横排放置,然后B是我们的研究对象,B的margin-left为-10.浏览器会怎么处理?浏览器会把B向左移动10px,如果设置B的margin-right为-10.这时就不是动B了,而是把C左移动10px。就这么个逻辑。
margin为负对float的影响
A元素不浮动时。
margin-right就没啥影响了,因为就不在同一行。
<style>
#mydiv1 { margin-right:-100px;}
</style>
<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
结果如图
A元素浮动时
两个div并排排列,margin发挥作用。
<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>
结果
符合上面说的。给A设置的右边-100的属性,表现是B左移100px。
再看
<style>
#mydiv1 {float:left; margin-left:-100px;}
</style>
<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
左边是负自己移动,右边是负邻居移动。
因此结果
![Uploading image_542898.png . . .]