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;
  }