圣杯布局和双飞翼布局

实现圣杯布局和双飞翼布局，“负边距”是必不可少的。

了解圣杯布局和双飞翼布局之前，我们先来了解下负边距。
一、定义：
负边距即margin属性的值设为负值，在CSS布局中是一个很有用的技巧。

• 当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也会发生相应的变化，这点与position:relative的元素设置top、left后元素还占据原来位置不同。
• 当margin-bottom、margin-right为负值的时候，元素本身没有位置变化，后面的元素会上移、左移。

二、负边距在布局中的作用：
1.对于普通的文档流，示例如下：

我们为上例中的一些元素添加

margin:-10px;

效果如下：

我们可以看到：绿色的块状元素向左和向上分别嵌入浏览器窗口的边界里10px，下面的蓝色块状元素也向上向左分别移动了10px.
2.对于浮动元素
下面有三个浮动的块级元素box,如下：

如果给它们均设置

margin-right:-50px;

效果如下：

后面的元素叠加到了前面的元素
如果给第三个元素设置了

margin-left:-80px;

效果如下：

此时第三个元素遮挡了第二个元素的一部分
如果给第三个元素设置

margin-left:-100px;

效果如下：

此时第三个元素完全盖住了第二个元素
知道了这些，我们就来看看圣杯布局和双飞翼布局。
三、圣杯布局

实现原理：
html代码中，将重要的内容main放在container的最前面，然后是aside,extra
1.将三者均设置

float:left;

2.将main的宽度设置为

width:100%;

使得main沾满一行；
3.将aside放到main所在行的最左边，给aside设置

margin-left:-100%;

4.aside覆盖了main内容的最左端，此时给container添加

padding:0 100px;

5.使aside填充container最左边的空白部分，为aside添加

left:-100px;

6.同理先给extra添加

margin-left:-100px;

再给extra添加

left:100px;

按照上述步骤，我们就可实现圣杯布局了，大功告成！
奉上代码吧：

四、双飞翼布局
实现原理：
html代码中，将重要的内容main放在container的最前面，然后是aside,extra
1.将三者都设置

float:left;

2.main占满一行，设置

width:100%;

3.将aside移动到main的最左端，为aside设置

margin-left:-100%;

4.将extra移动到container的右侧，为extra设置

margin-left:-100px;

5.main的一部分被extra和aside盖住了，给main中添加

的子元素，然后设置

margin:0 110px;

按照以上步骤，即可实现双飞翼布局。
上代码吧：

五、总结下二者的异同
1.两种布局方式都是把主列放在文档流最前面，使主列优先加载；
2.两者在实现上的相同点在于都让三列浮动，然后通过负外边距形成三列布局；
3.两种布局方式的不同在于如何处理中间主列的位置：圣杯布局是利用父容器的左右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左右外边距定位。

参考：
1.CSS布局奇淫巧计之-强大的负边距
2.CSS布局 -- 圣杯布局 & 双飞翼布局
3.神奇的负边距
4.负margin用法权威指南
5.浅析圣杯布局和双飞翼布局

版权归本人所有，若有转载，请注明来源。