负margin技术的应用
在上一篇博客”盒子模型“中，我们知道padding不能取负值，而margin是可以取负值的，负margin在实战中的应用还是挺多的。
首先介绍一下当margin取负值时会发生什么神奇的事。我们分两种情况：
- 当元素的margin-top和margin-left取负值时，“当前元素”会被拉向指定方向。
- 当元素的margin-bottom和margin-right取负值时，“后续元素”会被拉向指定方向。
下面用一张图来演示：
从图中我们可以看出，margin-top和margin-left将当前元素拉出，然后覆盖其他元素。margin-bottom和margin-right将后续元素拉进，然后覆盖当前元素。
举例：margin-top或margin-bottom为负数。首先，未设置margin时效果如下:
当为第二个div添加margin-top:-30px；效果如下：我们发现第二个div向上移动覆盖了第一个div
当为第二个div添加margin-bottom：-30px；效果如下：我们发现第三个div向上移动覆盖了第二个div。
举例：margin-left和margin-right为负数。首先来看一下没有添加margin时的样子
当我们为第二个div添加margin-left：-30px；我们发现第二个div向左移动覆盖了第一个div
当我们为第二个div添加margin-right：-30px；我们发现第三个div向右移动覆盖了第二个div
下面让我们来讲讲负margin的一些奇淫技巧应用：
主要有以下四个：
（1）图片与文字对齐。
（2）自适应两列布局；
（3）元素垂直居中；
（4）tab选项卡；
1.图片与文字对齐
当图片与文字排在一起的时候，在底部水平方向是不对齐的，因为图片与文字默认是基线对齐(vertical-align:baseline)，尤其图片较小时更加明显,如果想要实现图片与文字底部水平对齐，除了使用“vertical-align：text-bottom”这个方法外，还可以使用兼容性较好的负margin来实现。
举例：
浏览器中显示效果如下：我们发现文字与图片底部不对齐。
这时候我们给img元素添加属性margin{0 3px -3px 0},,浏览器中显示效果如下：
margin{0 3px -3px 0}这个属性可以看作一个公式一样的东西去记忆，以后一旦遇到图片与文字排在一起的时候就用这个属性。
2.自适应两列布局
自适应两列布局指的是在左右两列中，其中有一列的宽度固定，另一列宽度自适应。
举例：
效果如下：
当我们改变浏览器的宽度，就可以看出自适应两列布局实际效果，worldpress经典的自适应两列布局就是使用这种方法实现的。
3.元素的垂直居中
想要实现元素的垂直居中一般来说比较麻烦，有一个经典的方法，就是使用position结合margin来实现
语法如下：
position这种方法是万能的，也就是不仅可以用于块元素（block），还可以用于inline-block元素和inline元素，对于margin-top和margin-bottom为什么要这样定义，上图解释的很清楚，一看就明白了。
4.tab选项
tab选项卡效果是一种十分节省页面空间的方式，在实际开发中经常会用到，像下图所示的tab选项卡，关键是使用”margin-top:-1px“，由于tab选项卡涉及javascript内容较多，因此不在此展开了，其实也可以纯css实现tab选项卡，大家可以去试试