负边距

Posted 2020-09-26

CSS中负margin

可以看这篇文章，讲得比较好懂
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

1. 负边距在普通文档流中的作用和效果

通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少

2. 左和右的负边距对元素宽度的影响

负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度

3. 负边距对浮动元素的影响

负边距对浮动元素的影响与负边距对文档流中元素的影响其实是差不多的。
浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右。

4. 负边距对绝对定位元素的影响

绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，
所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。利用这点，就有了经典的利用绝对定位来居中的方法

width:100px; height:100px; //高度和宽度都是100px
background:#f00; //颜色是红色
position:absolute; //绝对定位
left:50%; top:50%; //离左边是整个宽度的一般，离顶部是整个高度的一般，这样元素就再右下的位置
margin-left: -50px; margin-top: -50px;" //通过负边距，这样元素整个向左向上移动了50px, 这样元素就正好居中