圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

  • 圣杯布局和双飞翼布局都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)

圣杯布局-Example





    
    
    
    
    
    
    
    圣杯布局




    
头部
中间中间中间中间中间中间中间后
左边
右边

双飞翼布局-Example




    
    
    
    
    
    
    
    双飞翼布局



    
中间
左边
右边

优点

    1. 兼容性好,兼容若有主流浏览器,包括万恶的IE6
    1. 可以实现主要内容的优先加载

额外知识点

  • 其实三列布局的方式还有很多 ,但也有各自的缺点
  • 1.如果左右两列用position: absolute定位布局做外层设计需要有个包含块设置(否则是相对浏览器可视区域)这样会层级,页面控制相对麻烦
  • 2.用浮动布局的话, 中间层要做到先加载实现不了
  • 3.flex布局低版本浏览器有些还不支持

Thinking in JackDan

你可能感兴趣的:(圣杯布局与双飞翼布局)