负值margin及其在圣杯布局上的应用

负值margin相对少见，这里对它进行系统介绍下。
（一）在非浮动元素上

非浮动元素各个方向上的负值margin

在非浮动元素上设置负值margin，效果按元素本身尺寸是否确定分为两类：
（1）元素本身尺寸确定，按 margin 的方向是 left、top 还是 right、bottom又分为两类：
（1-1）设置 margin-left 或 margin-top，元素会朝着左或者上移动相应的距离。

<style>
.inner1{
            margin-left:-50px;
        }
</style>
<div class="outer">
    <div class="square inner1"></div>
</div>

非浮动定宽元素设置margin-left:-50px

(1-2) 设置 margin-right 或 margin-bottom，元素A本身并不会移动，其尺寸也不会改变，但是A的后续元素会向左或向上移动相应距离，从而压盖A。如下图所示，div1
设置 margin-bottom:-50px 后，其自身位置与尺寸虽然并未变化，但是div2却向上移动了 50px，从而压盖 div1一半区域。（猜测是 所有元素都是矩形盒子，margin 确定的是盒子的最外层边界，其为正值的时候，理解起来很直观，就元素很害羞，需要安全距离，别的元素必须保持这个距离；但是在 right 和 bottom 方向上，其值为负的时候，仿佛是朝内缩小了盒子的最外层边界，于是附近兄弟元素就可以好奇地凑过来了）

压盖1
压盖2

（2）元素本身尺寸未确定
（2-1）宽度未定
这时设置 margin-left 或 margin-right 为负值，都会导致元素本身宽度增加相应的值。如下图，div3 本身宽度未定，默认是父元素宽度100%，设置 margin-left 为 -100px后，它的宽度就朝着左边增加了100px.

image.png
（2-2）高度未定
因为高度未定时元素高度由其子元素决定，设置 margin-top 或 margin-bottom为负值并不会增加元素高度，表现上与元素尺寸确定时一致。

（二）在浮动元素上
（1）div1向左浮动，且设置 margin-right 为负值，div2是非浮动元素，效果如图所示，很意外吧，div1 与 div2 位置上重合了（原本尺寸一致），但是 div2中的内容显示在div1的下一行。

image.png image.png

（2）div1 与 div2 均向左浮动，div1设置 margin-right: -50px 。效果如图，对 div2 而言，div1空间位置不变，但是最外层右边界如同向左缩了 50px 一样，因此 div2 压盖了 div1 部分区域。而 div1 自身实际尺寸与内容仍维持不变，就像div2不存在一样。

image.png

div1 与 div2 均向左浮动，若只对 div2 设置 margin-left: -50px ，也能达到与上图一致的效果。这可用来处理这种情况：几个浮动元素在同一行排列不下时，可对浮动元素应用 margin-left 或 margin-right 负值，使其向左或向右移动，留出空间给其他浮动元素，这样就能排成一行了。

---------------------------------分割线-----------------------------------------------------------------
好了，现在说下负值margin在圣杯布局上的应用。所谓圣杯布局，一般有3栏，左右各一栏，宽度固定，中间栏（呈现页面主要内容）自适应，而且要求先加载中间栏。
效果如图：

圣杯布局效果图
步骤：
（1）三栏放在一个容器div中，容器的左右 padding 分别设置为左右两栏的宽度，以为它们腾出空间。
（2）三栏均设为浮动（向左），左右两栏相对定位，中间栏在dom中在左右两栏前面。
（3）中间栏宽度100%，所以左右两栏会被挤到下面，所以设置左栏 margin-left:-100%，使其回到上一行最左侧。
（注意：由于上一行已经完全被中间栏占了，这一行就也没空间排其他元素。所以为了将左栏与中间栏排在同一行，需要将其向左移动，移动距离最少是左栏的宽度，如图3-1所示，但是这样不好将左栏再移动到最左侧，所以设置其 margin-left:-100%，如图 3-2所示，这里的 100% 是针对第（1）步中的父级容器而言的，因为中间栏宽度上是铺满的。这样左栏与中间兰左侧对齐了，只要再设置其 left:-左栏宽度，就可将其移动到最左侧。
还有个值得留心的地方，就是当左栏与中间栏不在同一行时，设置左栏margin-left 负值，向左移动的参照是左栏初始位置，如图3-3。而左栏一旦回到上一行，那么其通过 margin-left 负值 向左移动的参照就是中间栏。）
3-1-左栏 margin-left:-左栏宽度
3-2-左栏 margin-left:-中间栏宽度
3-3 左栏回到上一行之前的向左移动
（4）对于右栏，可采取类似的操作，设置 margin-left: -右栏宽度; right:-右栏宽度，先让其回到上一行，再移动到最右侧。
（注意：对于右栏设置 margin-right:-右栏宽度; 也可以将其移动到最右侧，这里我目前还不明白，对浮动元素设置 margin-right 负值不是不会移动其位置吗？当 margin-right:-(<右栏宽度) 时，右栏仍在下一行，且一点都不会移动，这个可以用（二）-（2）解释。）