负margin技术的应用

在上一篇博客”盒子模型“中，我们知道padding不能取负值，而margin是可以取负值的，负margin在实战中的应用还是挺多的。
首先介绍一下当margin取负值时会发生什么神奇的事。我们分两种情况：

1. 当元素的margin-top和margin-left取负值时，“当前元素”会被拉向指定方向。
2. 当元素的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选项卡，大家可以去试试