三列布局
初衷
这得从去年我12月毕业去面试说起，学了三年前端，终于能够出山了。怀着无比冲动投了上百份简历，命中率60%。虽说战果还是能够的，然而在近百场面试中，的确让我播种颇多，此文写于对前端的面试中发现自己的有余，查漏补缺，更加让本人的技术更加成熟，发现自己有余，从中明确本人的缺失。同时也心愿也能帮忙各位江湖中人解惑。序言
这里所要介绍的布局常识次要是在解决三列布局模式而呈现的几种布局解法，其中蕴含了经典的圣杯布局，双飞翼布局，相对定位的布局形式，还蕴含2009年W3C所提出的Flex布局形式和以CSS3所带来的calc计算函数来解决三列布局的形式三列布局解决办法
圣杯布局
由来：2006 年 Matthew Levine 在 《A LIST APART》 上发表了一篇名为 《In Search of the Holy Grail》 的文章，提出了 圣杯布局 的思路。利用 负外边距 来实现咱们须要的成果，充分体现了 CSS的艺术 与 负外边距 的弱小。
原理: 利用float浮动和定位、负边框，实现两边固定，两头自适应的三栏布局
具体实现（采纳html5和css3的语义化实现）
<body> <!-- header start --> <header>header</header> <!-- header end --> <!-- main start --> <main> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </main> <!-- main end --> <!-- footer start --> <footer>footer</footer> <!-- footer end --></body>/* 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能够解决。