Css之聖盃佈局和雙飛翼佈局
聖盃佈局和雙飛翼佈局是我再一次京東面試中聽到的詞彙,簡單來說,這種佈局其實都是我們CSS+div佈局的入門級,但是大家肯恩都不知道這個名詞,高大上的名詞一般都會顯示你的知識面及專業度
閒話不多說,原理講起來:
事實上，聖盃佈局其實和雙飛翼佈局是一回事。它們實現的都是三欄佈局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固佈局。它們實現的效果是一樣的，差別在於其實現的思想。
通過縮放頁面就可以發現，隨著頁面的寬度的變化，這三欄佈局是中間盒子優先渲染，兩邊的盒子框子固定不變，即使頁面寬度變小，也不影響我們的瀏覽。注意：當你縮放頁面的時候，寬度不能小於700PX，為了安全起見，最好還是給body加一個最小寬度!
那麼瞭解原理了,我們來看看實現的佈局方法吧
第一步:來看下HTML結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"<header><h4>Header內容區</h4></header> <div class="container"> <div class="middle"><h4>中間彈性區</h4></div> <div
</body> </html>
這裡注意下寫法,一定要將中間盒子寫在前面,因為要優先渲染.
第二步：給出每個盒子的樣式
</style>
第三部:看此時的效果圖
此時的left和right已經被擠到下邊了,因為container盒子的高度是限制的,那麼如果沒有限制的話
大家可以看到，三欄並沒有在父元素的一行顯示，就是因為中間盒子我們給了百分之百的寬度。所有左右兩個盒子才會被擠下來.
那麼如何讓它們呈現出一行三列的效果呢？那就要讓左邊的盒子要到中間盒子的最左邊，右邊的盒子到中間盒子的最右邊。換個想法，如果中間盒子不是100%的寬度，那麼按照文件流，左邊的盒子一定會在中間盒子的後面顯示，接著顯示右邊的盒子。但是現在中間盒子是滿屏了的，所以左右兩個盒子被擠到下一行顯示。我們要做到的是讓左右兩個盒子都上去。此時，CSS的負邊距(negative
margin)該上陣了。
第四部:利用負邊距
1.讓左邊的盒子上去
需要設定其左邊距為負的中間盒子的寬度，也就是.left {margin-left:-100%;}。這樣左盒子才可以往最左邊移動
2.讓右邊的盒子上去
需要設定其左邊距為負的自己的寬度，也就是.right {margin-left：-200px;}。這樣右盒子才可以在一行的最右邊顯示出自己
到這裡，是不是感覺很有成就感？但是很遺憾的告訴你，還沒結束哦！
我們現在的確是硬性的實現了固比固佈局。但是要記住，中間盒子是自適應的寬度，所以中間盒子裡的內容會被左右盒子給壓住一部分。
比如現在我給中間盒子加很多的內容，大家看看效果圖
所以，我們的工作還沒停止。
第六步：讓中間自適應的盒子安全顯示
在外層盒子container中加入：首先:利用父級元素設定左右內邊距的值，把父級的三個子盒子往中間擠
.container{
padding: 0 200px;} 這裡的200px是左右盒子的寬度。效果如下:
我們可以看到，左右兩邊的內邊距是有了，但是中間盒子上的內容還是被壓著。
其次:給左右兩個盒子加一個定位，加了定位之後左右兩個盒子就可以設定left和right值
程式碼如下：.left{ position: relative; left: -200px;}.right{position: relative;right: -210px;}
第七步：看最終效果圖
現在，聖盃佈局終於搞定了，也實現了我們要的效果，左右側的盒子固定，中間盒子自適應，而且中間盒子的內容完全不受影響。
整體程式碼看一下
