html前端三列布局

时间 2020-11-28

标签 css html 前端 html5 css3 面试函数布局 flex code 栏目 HTML 繁體版

原文原文链接

三列布局

初衷

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

序言

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

三列布局解决方法

圣杯布局

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

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

具体实现（采用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能够解决。前端