CSS中的负边距

2015-04-22 时候写的老文，由于但愿引用因此拿了出来。

那天被一个同窗问了一个问题，三列的div，要求父div的高度和三个div的高度都和三个中字数最多，也就是高度最高的那个同样高。试了试才发现确实有问题。在网上查到了解决方案，运用了一些很奇葩的代码，贴上来和你们分享。点击这里查看demo。

以后仔细的百度了一下，发现了这么一个叫作内外补丁负值法的东西。不过百度内外补丁负值法，出来的都是同一篇文章，感受不是一个真正的术语。仍是把这篇文章贴出来，有兴趣的同窗能够看看。

在这个解决方案中，又涉及到了传说中的负margin。以前在阿里笔试也有一个三栏布局的题，其中一个解决方案用的也是左右的负margin。深刻研究以后又发现了圣杯布局、双飞翼布局等不少示例，确实要好好研究负边距这个东西了。

以后参考了CSS布局奇淫巧计之-强大的负边距这篇文章，里面作了实际的demo，总结成一点就是，css中盒子真正的边界，是由margin决定的，并且margin能够很霸气的经过负值来压缩实际宽度（padding不容许负值）。

有了这一点认识以后，不少问题都解决了。就好比说上边那个demo，经过padding-bottom:10000px;建立了一个足够高的盒子，再经过margin-bottom:-10000px;抵消这部分盒子在文档流中的实际占位（可是实际仍是存在的，因此就会按照第一个的高度等高），再给父级元素加上overflow:hidden，去掉多余的高度，效果就实现了。

同时，在上边那篇文章里还解决了一个布局的问题，就是多列间有margin，可是两边没margin的问题（听不懂我中文的直接点这里看demo吧，我知道本身说的很差）。以前一直是循环到一行最后一个的时候给加上一个class，如今能够免了，就好比我在demo里用margin-right:10px;给li之间建立一个间隔，而后用marigin-rignt:-10px;强行加宽ul，使四个li能在一行，可是ul外content的宽度设为width:830px;(4200px+310px;)，这样就能够正确的居中了。

以后简单说下圣杯布局和双飞翼布局吧，他们主要是为了解决三栏问题。三栏问题的研究能够看看张鑫旭老师的博客文章我熟知的三种三栏网页自适应的布局方法。而后以双飞翼举例吧，他的DOM结构是这样的。

<div class="main">
        <div class="main-content"></div>
    </div>
    <div class="sub"></div>
    <div class="extra"></div>

把main放在最前面，而后对.sub（也就是left）使用margin-left:100%;强行移动到左边；对.extra（也就是right）使用margin-left:(right的宽度);强行移动到右边。因为右边的栏会盖住main的内容，全部就直接给main里加上子div，经过给子div加上margin-right防止重叠保证正常显示。如此煞费苦心的布局目的只有一个，就是让浏览器先渲染main，实现主内容先被加载的效果。圣杯布局的话，印象中就是把.main-content的margin换成了.main的padding，目的都是同样的。

再多说一点关于三栏布局的东西，就是在利用浮动布局来实现三栏的时候，应该记住，在DOM里的顺序，是左浮动的div最前，右浮动的div中间，中间的在最后，否则就会出问题。千万不要想固然以为中间的div在DOM的中间，而后两边div分别float。由于中间的div默认要占一行，按理说右边的会先被挤下去，再float，因此他就上不来了，实现不了咱们想要的效果。若是没有把中间的div放到第一个位置的需求的话，仍是建议用浮动的方法作三栏布局，简单易用成本低。

自此也算是总结了负边距的一些效果，有时候想一想的话，要是pading支持负值的话又会有什么样的奇怪方案出现呢？

== 2015-11-27更新 ==

今天见到了一个奇怪的面试题，用三个div实现一条彩虹，一样使用了负边距。

相关推荐：

• 那些年，奇妙的圣杯与双飞翼，还有负边距