乐趣区

关于前端:html前端三列布局

jiezi

三列布局

初衷

这得从去年我 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 能够解决。

退出移动版