圣杯布局和双飞翼布局的区别的总结

圣杯布局

圣杯布局就是三栏布局，其中左右两栏固定宽度，中间部分自适应

主要步骤：

在html中，中间的块在最前面，后面紧跟左边的块和右边的块

三者均设置float:left，中间块设置width:100%，此时中间块在一行，两个固定宽度的块在一行。

左边块设置margin-left:100%，右边块设置margin-left: -width，此时左右块位于中间块的两边，但是其覆盖了中间块的两侧的一部分内容。

设置外层容器padding：0 rightwidth 0 leftwidth，为左右两边腾出空白位置。

设置左右块position:relative，且左块left: -width，且右块right: -width，使左右快分别向左和右偏移，从而占据了空白位置。

双飞翼布局

双飞翼布局与圣杯布局达成的效果类似，只是实现方法有所差别而已。区别在于双飞翼给中间块套了一个容器，通过设置该容器内部的中间块margin属性从而使中间块两侧的内容不被左右块遮挡。