三栏布局（圣杯布局和双飞翼布局）

1.圣杯布局








    

        
中间内容部分自适应
        
左边栏
        
右边栏
    





2.双飞翼布局









    

        

            
中间内容部分自适应
        
        
左边栏
        
右边栏
    



相同：圣杯布局和双飞翼布局的实现思路都是通过margin或padding的负值使三栏当中的元素占据一定的空间流，从而实现左右边栏固定，中间内容部分自适应。

不同：

（1）圣杯布局还需要在父元素内设置position:relative；和padding一定的数值，子元素内设置left或right值，从而调整左右边栏的位置。

（2）双飞翼布局就不用在设置position:relative,但是需要在主内容区域外层在套一层div，并设置margin值就可以了。

优势：这样布局的优势是可以在页面加载时，优先加载中间内容区域。

注意：需要在布局时把中间内容区域，写在最上方。