CSS布局之什么是圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

在面试时，你会经常遇到那么一个考题，有left、right、container三个盒子，要求left与right盒子宽度固定，分别固定于浏览器两侧，container位于中间，宽度随浏览器窗口自适应；说白了，就是要你进行两边定宽，中间自适应的三栏布局，并且中间栏要放在文档流前面以优先渲染。而圣杯布局与双飞翼布局就是用来解决这个问题最常见的布局方法。但两者在实现上有一些差异。

先给出一个常见的DOM结构：

 

先说圣杯布局：

第一步，设置如下样式：

 

给三盒子都加：float:left; 这时，由于container的宽度为100%；所以，一行装不下这三个盒子，left与right会被往下挤：

 

这时，给left加margin-left:-100%; 给right加margin-left:-200px; 两个盒子就分别到了自己的位置上去：

 

看到这，有人就会说，这不是达到效果了吗？其实，你仔细看就会发现，表面上看是达到效果了，其实，这时的container的宽度是100%；撑满浏览器的，它的左右两边各被left
与right盖住了一部分，这就尴尬了。

第二步，给父元素加padding：

 

结果是：

 

我们发现，这时，虽然container的宽度是对的了，但是left和right也也被挤到里面去了，还是把container的内容盖住了。

第三 步，加定位：

 

给left与right加position: relative; 然后left相对自己往左偏移自身宽度的距离，让出盖住的部分，right相对自己往右偏移自身宽度，让出盖住的部分，这就可以达到我们想要的效果了：

 

至于这三个盒子的高度，就看需求而定了，主要好好利用浮动与定位，相信很简单。

再来看双飞翼布局：

双飞翼布局前期思路与圣杯布局一样，都是利用浮动和margin将三个盒子弄到一行的位子，也就是说在第一步上是一样的。不同的是如何处理被遮盖的问题。
相对圣杯布局，双飞翼布局要在DOM结构上加一个元素：

 
在container内部加了一盒显示内容的盒子container_in的盒子，在布局时，只要left与right不盖住container_in就可以了。

所以，双飞翼布局的css代码如下：

 

只要给container加上左右margin，我们就得到了想要的效果：

 
相对于圣杯布局来说，双飞翼布局不用给left与right加定位于left、right属性，只要在container内部加一个盒子用于显示内容，并给它设置相应的左右margin就可以了。两种布局各有特点。

其实，只要熟练掌握css布局原理，实现这种效果有很多种方法：

针对第二种DOM结构：

1）、

 

 

2）、

 

针对第一种DOM结构：

1）、

 

  这些布局方式，可能不使用与某些需求，但只要掌握布局原理，做一些适当的改变就可以了。。。