说起网站布局，之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样，把各种需要的组件一摆，然后设个宽高给个定位不就行了，有什么麻烦的，确实，一开始在做网站的时候很多时候都是每个元素固定给宽高，很快就做完了，但这样的办法去做网站的话存在一定的缺陷，例如在不同分辨率的设备上显示的话可能与你一开始设计的样式并不相同。为了解决这样的情况，我们现在布局更偏向于把网站做成宽高自适应的布局，另外，在解决了自适应问题以后，我们更侧重去对网站进行一些优化，例如使占用空间较大的图片，段落等内容优先加载，可以提升用户的观看体验。而今天我们的主题，“双飞翼布局”与“圣杯布局”就是一个两边固定，中间宽度自适应，并且可以做到优先加载中间盒子的一个三栏布局方式。具体效果如下图所示。
话不多说，直接上代码，先来圣杯布局，我们先把dom结构写出来
图中即为圣杯的结构，我们可以看到中间的盒子被写到了第一个，这么一来在可以让浏览器先去加载中间存放内容的盒子，例如如果内容中含有图片的话，可以在打开界面的时候，提高图片的加载速度。
之后我们开始写CSS样式
图中我们可以看到，我给最外面的盒子加了个6像素的红色边框，左右的盒子各设置了相应的宽高与背景颜色，中间盒子设置了100%的宽度自适应，因为div是块元素，默认竖着排列，为了实现横向排列，我们给所有的div设置了向左浮动，并给外层div写了个overflow:hidden;用于防止高度塌陷，下面我们来看看效果
可以看到因为中间的盒子设置了100%的宽度，导致content的宽度与外层盒子”box”一样，把另外两个div给挤下去了。那么为了解决这种情况，我们给两边的盒子添加一个定位.
这里我们给了一个相对定位，因为相对定位的参照物是自己，可以相对于自己原来所处的位置进行位移，并且不脱离文档流（仍然占用空间）。添加完定位后，让他们两个分别向左右平移与自身宽度相等的像素，为了制造出两个盒子在两头的效果。那么接下来我们来看看效果
可以看到虽然left和right盒子到了两端，但只是盖住了底下的content盒子，并没有达到我们想要的效果，所以我们可以往外层div中为两侧添加padding，这样相对于强行在外层盒子的两端填了块空间出来
之后我们可以得到这样的效果
虽然中间的盒子不能占用padding的空间，但是我们可以让两边加了定位的盒子往两边移动呀，添加浮动元素特有的位移命令让他们“归位”!
这样就成功做出了两端固定，中间自适应的效果，这时候你可以拖动浏览器试试，无论你这么拖，中间的宽度都是自适应的。这种使用padding强行“挤”出来的效果，就是圣杯布局啦。两侧固定的元素就像是杯子两边的把手一样。俗话说，盒子的空间就像海绵里的水，挤挤总是会有的嘛（好像有什么不对的地方!!!∑(ﾟДﾟノ)ノ）
那么接下来我们在说一下双飞翼布局，双飞翼布局做出来的效果如下图所示
有了圣杯的基础以后，再看双飞翼也好理解一些，双飞翼与圣杯不同的是，我们要在content盒子中加入一个“中介”盒子，利用它来实现布局。还是先看结构
之后我们再给他们加入css样式
这里我们先不管content里面用来当“中介”的那个盒子“bg”，咱们先把那三个盒子像之前一样加上宽高，浮动，然后得到之前圣杯一样的开局。
之后重点来了，我们这次不再像之前一样为两头的盒子加定位让他们动了，这次我们利用margin让他们移动，如下图所示
可见left是向左移动了-100%，这样做是为了让它到最左端，之前圣杯移动自身的宽度一样的距离是因为relative定位是按照元素本身应该所在的地方移动的，而现在元素和之前不一样，并没有加定位，是使用margin来移动的。，所以需要利用-100%来实现位移到左端，而right直接移动与自身宽度相等的距离就可以了，因为本身就在下一行的开始，直接往左一动就跑到上一行的右端去了。根据以上的代码，我们可以得到如下图所示的效果
那么还是content盒子被两边的盒子给盖住了，那么我们怎么解决呢，这个时候就需要“中介”出场了。
我们给盒子bg添加一个高度并设置背景色(此处不设置宽度是为了让它宽度自适应)。得到了一下的效果
可以看到红色的区域就是bg了，因为没有设置宽高，bg的宽度自适应的和content的大小一样了，那么我们为了得到我们想要的效果，再给盒子两端一个margin，赋值与两端盒子的宽度一样，让他与两端的盒子“保持距离”
之后我们便成功的做出了想要的效果
当然，如果去掉content的背景色的话效果会更好一点
怎么样，虽然使了点小手段，但最后得到的效果还是一样的，这么一来，content就不再像以前一样用来盛内容了，而是想外层的box一样变成了一个容器，由盒子bg来替代他去盛内容。这就是双飞翼布局。
综上所述，圣杯的实现是靠定位加padding去挤出来的，而双飞翼是利用一个“中介”，配合margin的使用做出来的效果，不管是哪种方法，出来的效果都是中间内容区域是自适应的布局，且优先加载内容区域，这样既实现了中间宽度自适应，同时又做到了代码优化的功效。在写网站的时候，如果你即想达到自适应三栏，又想优先加载中间的内容，或者说你想让浏览器优先解析中间的内容，又想实现自适应的话，可以使用这两个布局方法。
