淺談面試中常考的兩種經典佈局——聖盃與雙飛翼

時間 2019-11-10

原文原文鏈接

聖盃和雙飛翼佈局介紹

最近正好碰到了寫這種佈局，一直沒有總結過正好藉此次機會總結一波，同時增強一下本身的理解。php

博客連接：http://www.xluos.com/index.ph...html

聖盃佈局和雙飛翼佈局做爲經典的三欄式佈局是面試中的常客。兩種佈局達到效果上基本相同，都是兩邊兩欄寬度固定，中間欄寬度自適應。在HTML結構上中間欄在最前面保證了最早渲染中間提高性能（由於這兩種佈局都比較老，我認爲在現代瀏覽器中這點兒性能優化效果並非很大），而且兼容性良好。兩種佈局的實現方法前半部分相同，後半部分的實現各有利弊，下面會簡單介紹二者的區別。git

Demo和代碼

聖盃佈局Demo、代碼
雙飛翼佈局Demo、代碼

兩種佈局的實現

首先，既然是三欄式佈局咱們須要三個divgithub

<header>聖盃佈局</header>
    <div class="bd">
        <div class="main text">
            main
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
    <footer>footer</footer>

給main設置width: 100%,讓它始終佔滿窗口，這樣纔有自適應的效果。面試

而後咱們給它加上點兒樣式區分，效果以下：
瀏覽器

爲了造成在一行三欄佈局，給三個方塊都加上浮動float: left;（注意清除浮動，由於浮動會致使父元素高度塌陷）
性能優化

接着咱們要把三個方塊拉到一行，這裏要利用負margin的技巧。佈局

left要放到main的左邊，設置margin-left: -100%,由於margin的百分比是相對與父元素的，因此須要整整一行的寬度才能補償這個margin的值，因此left就能到main的左邊。
接着讓right到main的右邊，只須要設置margin-left的值爲負的right的寬，好比margin-left: -200px;，正好使main重疊right的寬度，由於設置了浮動因此right就會到main的右邊了。

下面咱們來看一下效果：
性能

看樣子好像咱們已經成功達到了效果？不要急給兩個方塊變透明，再給中間加點兒內容看看。優化

咱們發現當內容變多以後，由於三個方塊都是設置的浮動，脫離的文檔流，兩邊固定寬度的兩欄會擋住咱們的內容。

因此要想兩邊不遮擋內容，就須要中間欄給兩邊的位置騰出來。咱們能夠想到padding和margin均可以用來騰出位置，這兩個屬性就是聖盃佈局的雙飛翼佈局的區別，不過雙飛翼佈局還須要稍微改造一下HTML的結構，這個等一下再說。

1.聖盃佈局——使用`padding`屬性

第一步：爲三個元素的父元素加上padding屬性，騰開位置
第二步：因爲騰開位置後會產生空白，因此使用position: relative;屬性來移動左右兩欄，這樣就不會遮擋了。

不過這樣佈局有一個問題就是：有一個最小寬度，當頁面小於最小寬度時佈局就會亂掉。因此最好給body設置一個min-width。這個min-width確定不能是試出來的，怎麼計算呢？就是left-width * 2 + right-width，至於爲何，簡單的說就是：「因爲設置了相對定位，因此當left原來的位置和right的位置產生重疊時，因爲浮動的緣由一行放不下就會換行」。因此佈局就被打亂了。使用雙飛翼佈局就能夠避免這個問題。

2.雙飛翼佈局——使用`margin`屬性

首先咱們要對HTML結構稍微改變一下：

<header>雙飛翼佈局</header>
    <div class="bd">
        <div class="main text">
            <div class="main-content">main</div>
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
<footer>footer</footer>

能夠看到，咱們在main裏面又加了一個內容層。若是知道盒子模型，就知道咱們是不能直接給main添加margin屬性，由於咱們已經設置了width：100%，再設置margin的話就會超過窗口的寬度，因此咱們再創造一個內容層，將全部要顯示的內容放到main-content中，給main-content設置margin就能夠了。