html前端三列布局

三列布局

初衷

这得从去年我12月毕业去面试说起，学了三年前端，终于可以出山了。怀着无比激动投了上百份简历，命中率60%。虽说战果还是可以的，但是在近百场面试中，确实让我收获颇多，此文写于对前端的面试中发现自己的不足，查漏补缺，更加让自己的技术更加成熟，发现自己不足，从中明白自己的缺失。同时也希望也能帮助各位江湖中人解惑。

序言

这里所要介绍的布局知识主要是在解决三列布局模式而出现的几种布局解法，其中包含了经典的圣杯布局，双飞翼布局，绝对定位的布局方式，还包含2009年W3C所提出的Flex布局方式和以CSS3所带来的calc计算函数来解决三列布局的方式

三列布局解决方法

圣杯布局

由来：2006 年 Matthew Levine 在 《A LIST APART》 上发表了一篇名为 《In Search of the Holy Grail》 的文章，提出了 圣杯布局 的思路。利用 负外边距 来实现我们需要的效果，充分体现了 CSS的艺术 与 负外边距 的强大。

原理: 利用float浮动和定位、负边框，实现两边固定，中间自适应的三栏布局

具体实现（采用html5和css3的语义化实现）

    
    
header
    
    
    

        
main
    
left
   
    
right
    
    
    
    
footer
    

/* header */
header{
    height: 200px;
    width: 100%;
    background: #5dbb79;
    display: flex;
    justify-content: center;
    align-items: center;

}
/* main */
main{
    padding: 0 200px;
}
main .main{
    float: left;
    width: 100%;
    height:400px;
    background: rgb(73, 182, 176);
    display: flex;
    justify-content: center;
    align-items: center;
}
main .left{
    float: left;
    width: 200px;
    height: 400px;
    margin-left: -100%;
    position: relative;
    left: -200px;
    background: rgb(131, 124, 104);
    display: flex;
    justify-content: center;
    align-items: center;
}
main .right{
    float: left;
    width: 200px;
    height: 400px;
    margin-left: -200px;
    position: relative;
    left: 200px;
    background: rgb(131, 124, 104);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* footer */
footer {
    height: 100px;
    width: 100%;
    clear: both;/*clear属性清除content内的浮动元素透出来 */
    background: rgb(210, 209, 208);
    display: flex;
    justify-content: center;
    align-items: center;
  }

该布局存优缺点

优点：可以左右拉伸，内容区域为自动缩放，符合早期的传统三列布局
缺点：当缩放当一定程度，会发现整个页面结构将会紊乱。这个问题用现在可以用到css3的mi-width可以解决。