愛生活，不愛黑眼圈
稍微了解前端的人都知道，聖杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂html結構又能體現出你對ｄiv+css布局的掌握，畢竟我們學習css主要就是為了更好地布局帶來最好的使用者體驗嘛~
事實上，聖杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在於其實現的思想。
雙飛翼布局
通過縮放頁面就可以發現，隨著頁面的寬度的變化，這三欄布局是中間盒子優先渲染，兩邊的盒子框子固定不變，即使頁面寬度變小，也不影響我們的瀏覽。注意：當你縮放頁面的時候，寬度不能小於700px，為了安全起見，最好還是給body加乙個最小寬度!第一步：給出html結構：
header內容區
中間彈性區
左邊欄
右邊欄
footer內容區
寫結構的時候要注意，父元素的的三欄務必先寫中間盒子。因為中間盒子是要被優先渲染嘛~並且設定其自適應，也就是width:100%。
第二步：給出每個盒子的樣式
header
.container
.middle
.left
.right
footer
第三步：看此時的效果圖
中間的三欄並沒有在一行內顯示
大家可以看到，三欄並沒有在父元素的一行顯示，就是因為中間盒子我們給了百分之百的寬度。所有左右兩個盒子才會被擠下來。
那麼如何讓它們呈現出一行三列的效果呢？那就要讓左邊的盒子要到中間盒子的最左邊，右邊的盒子到中間盒子的最右邊。換個想法，如果中間盒子不是100%的寬度，那麼按照文件流，左邊的盒子一定會在中間盒子的後面顯示，接著顯示右邊的盒子。但是現在中間盒子是滿屏了的，所以左右兩個盒子被擠到下一行顯示。我們要做到的是讓左右兩個盒子都上去。此時，css的負邊距(negative margin)該上陣了。
第四步：利用負邊距布局
1.讓左邊的盒子上去
需要設定其左邊距為負的中間盒子的寬度，也就是.left。這樣左盒子才可以往最左邊移動。
2.讓右邊的盒子上去
需要設定其左邊距為負的自己的寬度，也就是.right。這樣右盒子才可以在一行的最右邊顯示出自己。
第五步：看此時的效果圖
實現固比固布局
到這裡，是不是感覺很有成就感？但是很遺憾的告訴你，還沒結束哦！
我們現在的確是硬性的實現了固比固布局。但是要記住，中間盒子是自適應的寬度，所以中間盒子裡的內容會被左右盒子給壓住一部分。
比如現在我給中間盒子加很多的內容，大家看看效果圖：
中間盒子的內容被蓋住
所以，我們的工作還沒停止。
第六步：讓中間自適應的盒子安全顯示
首先:利用父級元素設定左右內邊距的值，把父級的三個子盒子往中間擠。**如下：
.container這裡的200px是左右盒子的寬度。
效果如下：
利用父級的內邊距將盒子往中間擠
我們可以看到，左右兩邊的內邊距是有了，但是中間盒子上的內容還是被壓著。
其次:給左右兩個盒子加乙個定位，加了定位之後左右兩個盒子就可以設定left和right值。**如下：
.left
.right{position: relative;right: -210px;
第七步：看最終效果圖
聖杯布局大功告成啦！
現在，聖杯布局終於搞定了，也實現了我們要的效果，左右側的盒子固定，中間盒子自適應，而且中間盒子的內容完全不受影響。你是不是也懂了呢?
雙翼布局：
與聖杯布局差不多，就是在main裡面放一層maininner,padding:0 200px 即可，不要在container中使用padding,同時left和right也不要position定位了
聖杯布局和雙飛翼布局（前端面試必看）
稍微了解前端的人都知道，聖杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂html結構又能體現出你對 iv css布局的掌握，畢竟我們學習css主要就是為了更好地布局帶來最好的使用者體驗嘛 事實上，聖杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適...
《前端》實現聖杯布局
最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。聖杯布局和雙飛翼布局作為經典的三欄式布局是面試中的常客。兩種布局達到效果上基本相同，都是兩邊兩欄寬度固定，中間欄寬度自適應。在html結構上中間欄在最前面保證了最先渲染中間提公升效能 因為這兩種布局都比較老，我認...
前端面試1 CSS布局
複製 float 不可用 absolute 不可用 flex 可用 table 可用 grid 不可用 與左右固定，中自適應的三欄布局 複製 做法 把要居中的元素的margin left和margin right都設為auto 場景 只能進行水平的居中，且對浮動元素或絕對定位元素無效。場景 只能對，...