聖盃佈局和雙飛翼佈局

時間 2019-11-20

標籤佈局雙飛简体版

原文原文鏈接

聖盃佈局和雙飛翼佈局是用來解決兩邊定寬，中間自適應的三欄佈局，這種佈局的優點在於中間的元素能夠優先於兩邊元素渲染css

聖盃模型來源於2006年發在a list part上的這篇文章：In Search of the Holy Grail。這樣命名多是由於老外以爲這玩意太nb了，能夠實現三欄佈局的一切要求（聖盃在西方神話中就是個聽說能實現一切願望的玩意）。不得不說，老外在某些方面還真是夠中二的。聖盃模型的部分參考了下面這篇文章：聖盃佈局和雙飛翼佈局（前端面試必看）html

至於雙飛翼模型，則來源於淘寶的UED，可是如今的淘寶首頁彷佛放棄了這種佈局方式，不知道是什麼緣由。前端

首先，先來寫一個帶有三欄的盒子（HTML）面試

<html>
<header>
<link href="./text.css" rel="stylesheet" type="text/css">
</header>
<body>
<header><h4>Header內容區</h4></header>
<div class="container">
    <div class="middle">
            測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息
    </div>
    <div class="left">
    #left
    </div>
    <div class="right">
    #right
    </div>
</div>
<footer><h4>Footer內容區</h4></footer>
</body>
</html>

爲了更直觀，來爲幾個塊狀結構設置樣式（CSS）

header{
    width: 100%;
    height: 40px;
    background-color: darkseagreen;
    }

.container{
     height:400px;
     overflow:hidden;
     } 
    
.middle{
    width: 100%;
    height: 200px; 
    background-color: deeppink;
    float:left;
    }

.left{ 
    width: 200px;
    height: 200px;
    background-color: #0000ff;
    float:left;
    }

.right{
    width: 200px;
    height: 200px;
    background-color: #a30bf0;
    float:left;
    }

footer{
    width: 100%;
    height: 30px;
    background-color: darkslategray;
    }

能夠看到，此時瀏覽器的顯示是這樣的：

能夠看到，三個盒子並無在父元素的一行顯示，就是由於中間盒子，也就是第一個盒子咱們給它了百分之百的寬度。因此左右兩個盒子纔會被擠下來。
瀏覽器

咱們須要利用負邊距佈局，讓左面的盒子上去（令第二個盒子左移第一個盒子的長度）：佈局

.left{margin-left: -100%;}

再讓右面的盒子上去（令第三個盒子左移盒子自己的長度）：

.right{margin-left: -200px;}

網頁效果是這樣的：

能夠看到，因爲中間盒子是自適應的寬度，因此中間盒子裏的內容會被左右盒子給壓住一部分。對於這個問題，聖盃佈局和雙飛翼佈局給出了不一樣的解決方法。
測試

聖盃佈局優化

首先:利用父級元素設置左右內邊距的值，把父級的三個子盒子往中間擠。
spa

.container{padding: 0 200px;}

能夠看到，左右兩邊的內邊距是有了，可是中間盒子上的內容仍是被壓着。

此時，要給左右盒子加一個定位，並使用left和right移動盒子code

.left{position: relative;
    left: -200px;}
.right{position: relative;
    right: -200px;}

如今，聖盃佈局終於搞定了，也實現了咱們要的效果，左右側的盒子固定，中間盒子自適應，並且中間盒子的內容徹底不受影響。

雙飛翼佈局

雙飛翼佈局解決遮擋的方法就比較簡單粗暴了，直接在中間盒子中再建立一個子div用於放置內容

HTML代碼：

<html>
<header>
<link href="./text.css" rel="stylesheet" type="text/css">
</header>
<body>
<header><h4>Header內容區</h4></header>
<div class="container">
    <div class="middle">
        <div class="middle-wrap"><!--新建立的div-->
            測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息測試信息
        </div>
    </div>
    <div class="left">
    #left
    </div>
    <div class="right">
    #right
    </div>
</div>
<footer><h4>Footer內容區</h4></footer>
</body>
</html>

能夠看到，在中間的盒子中新建立了一個div，此時還須要調整這個子div的margin達到居中顯示的效果。

css代碼：