「面試題」如何實現一個聖盃佈局？

時間 2019-11-06

標籤面試如何實現一個佈局欄目快樂工作简体版

原文原文鏈接

前言

最近，有個朋友向我訴苦說，面試的時候忽然被問到了如何實現佈局和原理，有點懵。以前JavaScript的部分回答得挺好的，恰恰在這裏翻船了，徹底沒有思路，後面的面試狀態一落千丈。結局也如他所料，沒有被錄取。html

我給這個朋友作了解答以後，回家整理出此文。但願其餘小夥伴面試中，再被問及聖盃佈局的時候，能夠沉着做答。前端

本文將介紹經典佈局——聖盃佈局的原理以及兩種實現方法：浮動和flex。面試

什麼是聖盃佈局？

聖盃佈局是爲了討論「三欄液態佈局」的實現，最先的完美實現是由 Matthew Levine 在 2006 年寫的一篇文章《In Search of the Holy Grail》，它主要講述了網頁中關於最佳聖盃的實現方法。佈局

它有如下幾點要求：flex

上部(header)和下部(footer)各自佔領屏幕全部寬度。
上下部之間的部分(container)是一個三欄佈局。
三欄佈局兩側寬度不變，中間部分自動填充整個區域。
中間部分的高度是三欄中最高的區域的高度。

接下來，將會介紹兩種實現的方法。它們的最終效果都同樣，以下圖：spa

實現方法1：浮動

先上代碼：code

<div class="header">
    <h4>header</h4>
</div>

<div class="container">
    <div class="middle">
        <h4>middle</h4>
        <p>middle-content</p>
    </div>
    
    <div class="left">
        <h4>left</h4>
        <p>left-content</p>
    </div>
    
    <div class="right">
        <h4>right</h4>
        <p>right-content</p>
    </div>
</div>

<div class="footer">
    <h4>footer</h4>
</div>

.header, .footer {
    border: 1px solid #333;
    background: #ccc;
    text-align: center;
}
.footer {
    clear: both;
}

.container {
    padding:0 220px 0 200px;
    overflow: hidden;
}
.left, .middle, .right {
    position: relative;
    float: left;
    min-height: 130px;
}
.middle {
   width: 100%;
    background: blue;
}
.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: red;
}
.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
}

解析一下思路：htm

在html中，先定義好header和footer的樣式，使之橫向撐滿。
在container中的三列設爲浮動和相對定位(後面會用到)，middle要放在最前面，footer清除浮動。
三列的左右兩列分別定寬200px和220px，中間部分middle設置100%撐滿
這樣由於浮動的關係，middle會佔據整個container，左右兩塊區域被擠下去了
接下來設置left的 margin-left: -100%;，讓left回到上一行最左側
但這會把middle給遮住了，因此這時給外層的container設置 padding: 0 220px 0 200px;，給left空出位置
這時left並無在最左側，由於以前已經設置過相對定位，因此經過 left: -200px; 把left拉回最左側
一樣的，對於right區域，設置 margin-left: -220px; 把right拉回第一行
這時右側空出了220px的空間，因此最後設置 `right: -220px;##把right區域拉到最右側就好了。

實現方法2：flex彈性盒子

用彈性盒子來實現聖盃佈局特別簡單，只須要把中間的部分用flex佈局便可。blog

<div class="header">
    <h4>header</h4>
</div>

<div class="container">
    <div class="left">
        <h4>left</h4>
        <p>left-content</p>
    </div>
    
    <div class="middle">
        <h4>middle</h4>
        <p>middle-content</p>
    </div>
    
    <div class="right">
        <h4>right</h4>
        <p>right-content</p>
    </div>
</div>

<div class="footer">
    <h4>footer</h4>
</div>

.header, .footer {
    border: 1px solid #333;
    background: #ccc;
    text-align: center;
}

.container {
    display: flex;
}
.left {
    width: 200px;
    background: red;
}
.middle {
    flex: 1;
    background: blue;
}
.right {
    width: 220px;
    background: green;
}

解析一下思路：圖片