css-负margin总结

这篇文章是从原博客转载过来的，是2013年写的，有些不对的地方请指出。

原文地址

博客地址 , 欢迎订阅

---

这是一篇我本身关于负margin的理解，今天由于作项目用到了负margin，几经找资料，终于搞懂了，就赶忙记下来，省得忘记了！

• margin为正时，top、left属性是以content上（左）或垂直上方相连元素margin的下（右）边为参考线垂直向下（右）位移。

• margin为负时，right、bottom属性是元素自己的border右（下）边为参考线水平向右（下）位移。

总结

1. 盒子最后的显示大小等于盒子的border+padding+正margin，而负margin不会影响其大小。

2. margin为负且盒子static时：

   • 若属性为top、left，盒子将被拉进指定的方向;

   • 若属性为bottom、right,将后续的元素拖拉进来，覆盖原本的元素。

   • 若width没有被设置，设定负margin-left/right会将元素拖向对应的方向，并增长宽度，此时的margin的做用就像padding同样

选项卡demo

怎么样实现上面菜单栏的选中状态下没有下边框的效果？
通常的思路是每一个菜单栏设置边框，选中的状态没有下边框

其实还能够这样，边框不是上面菜单栏的，而是下面内容块的：

明白了把，因此只要给菜单栏设置margin-bottom:-1px就可让下面的内容块上移1px，恰好让菜单栏的背景色盖住那个1px的边框。
若是选中状态没有背景色，就悲剧了：

请看 demo

如今看这个例子没有明显展现出负margin的能力，再看下面的

负margin加宽元素

再看一个width没有设置，经过负margin加宽的元素的布局例子，这是很常见的例子，若是不用负margin，就会很麻烦呢
demo

圣杯布局

由于BFC有这个特性：

元素在设定width时，添加border、padding、margin会致使元素变宽；可是在没有设定width时，元素会自动填满父元素，添加padding、border、margin会使元素变窄，减小量等于他们三个之和。

demo

负margin实现两列等高布局

demo

参考文章

负值之美

以上是网上资料总结，个人总结就一句话：left、top不论正负本身动，right、bottom不论正负别的元素动！正的向外，负的向内！考虑问题的时候还要考虑到盒子的特性问题！！

PS:遇到问题只要先想一想什么是margin，margin的做用是什么，则负margin的工做原理则迎刃而解！