两种CSS布局——圣杯布局和双飞翼布局（两侧固定中间宽度自适应）

一.概念：

1.圣杯布局和双飞翼布局两者功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局

2.圣杯布局来源于文章In Search of the Holy Grail，双飞翼布局来源于淘宝UED遵循特点

3.遵循特点：

（1）两侧宽度固定，中间宽度自适应

（2）中间部分在DOM结构上优先，以便先行渲染

（3）允许三类中的任意一列成为最高列

（4）只需要使用一个额外的

标签

二.圣杯布局：

1.写下HTML代码

2.使三个区域都处于浮动状态，并使main的宽度为父容器的100%

3.为两侧侧边栏添加负margin，用以调整位置，其中摆在左边的left的margin-left为-100%，

而右边right的margin-left则为负的其自身的宽度（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）

4.为class=“container”的主容器设置左右padding值，使其为以后的侧边栏定位空出位置，padding的值为侧边栏的宽

5.对left和right添加position：relative；然后对它们进行定位，移动到两侧，圣杯布局就初步做完了

三.双飞翼布局：

1.双飞翼布局不仅能满足main处于优先加载的地位，也能更好解决圣杯布局的错乱问题，且css代码简单，缺点是增加了一个标签

2.步骤：

（1）给main里面添加一个内容标签content，并且设置它的左右margin值为左右侧边栏的宽度

（2）去掉main的背景色和高度，双飞翼布局

四.实例代码：

1.圣杯布局：

    
    
    


    

        
中间栏
        
左边栏
        
右边栏
    

2.双飞翼布局：

    
    
    


    

        

           
中间栏
        
        
左边栏
        
右边栏