作用:圣杯布局和双飞翼布局解决得问题是一样得,就是两边顶宽,中间自适应得三栏布局,中间栏要放在文档流前面以优先渲染。
    区别:圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position:relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于防止内容,在该子div里用margin-left和maigin-right为左右两栏div留出位置。
    圣杯布局代码:

    header


    middle

    left






    圣杯布局代码:
    header


    middle


    left