圣杯布局和双飞翼布局

双飞翼布局和圣杯布局其实是我们经常会在网站中看到的经典的三栏式布局，即中间是主要内容main-content，然后是左边侧栏，一般是网站的分类信息，右边栏就是一些附属功能，最典型的例子就是淘宝和京东。

1.双飞翼布局

<divclass="main">main
<divclass="main-son">main-son</div>
</div>
<divclass="left">left</div>
<divclass="right">right</div>

上面就是双飞翼布局的html代码，结构非常清晰，分为main，left，right三个部分，main中有一个子标签main-son,用来显示主要内容。

下边来一步一步看

1.首先我们在页面插入一个div，classname=main，float=left，宽度为100%



2.加入两个新的div，类名分别为left，right，宽度我们这里都取20%，高度和main相同，float=left，效果如下



那么我们怎样让left和right去到第一行呢？

3.这里我们让left和right的margin-left属性分别为-100%（main的宽度）和-20%（right的宽度），效果如下


4.这是我们在left和right的div中添加内容，是能够正常显示的，说明我们两边的侧栏实现成功了，那么main中的内容怎么办呢？

这里我们在main中添加一个子div，类名main-son，如果我们直接放过去，main-son的内容会被left和right覆盖掉，于是就给main-son的左右外边距分别为left和right的宽度。

也就是margin=0px20%；这样就能够保证main-son的内容不会被覆盖掉。

以上就是双飞翼布局的内容。是不是很简单。

2.圣杯布局

圣杯布局和双飞翼布局的实现目的是相同的，所以他们的前3个步骤是一样的，区别是双飞翼布局在main当中加了一个子div，而圣杯布局是利用父元素的内边距实现。

<divclass="container">
<divclass="main">main</div>
<divclass="left">left</div>
<divclass="right">right</div>
</div>

我们从第4步开始，为了main中的内容不被遮挡，我们给父元素container添加左右内边距，宽度分别是left和right的宽度，效果：



这时，浏览器两侧留出了空白区域，就是container的内边距。

5.那么现在，为了让main中的内容完全暴露出来，我们只要将left和right向两侧移动就好了。

分别给left和right添加position：relative，让他们相对于自己定位，然后，给左侧栏添加属性left：-（自身宽度），右侧栏right：-（自身宽度），那么两个侧栏就会分别向两侧移动，因为我们之前设置的父元素内边距宽度就是侧边栏的宽度，所以特闷正好占据了父元素的内边距。



这样，我们就实现了圣杯布局。

两种布局的实现目的是一致的，思路也差不多，只是在最后解决侧边栏覆盖主栏内容时有差异，双飞翼布局是添加了一个子div，而圣杯布局是利用了父元素的内边距，一个多了个便签，一个添加了几个属性，孰优孰劣还是在实际应用中去判断吧。