資訊專欄INFORMATION COLUMN
摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內容部分為兩邊騰開位置參考
圣杯和雙飛翼布局介紹
最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。
博客鏈接：http://www.xluos.com/index.ph...
圣杯布局和雙飛翼布局作為經典的三欄式布局是面試中的常客。兩種布局達到效果上基本相同，都是兩邊兩欄寬度固定，中間欄寬度自適應。在HTML結構上中間欄在最前面保證了最先渲染中間提升性能（因為這兩種布局都比較老，我認為在現代瀏覽器中這點兒性能優化效果并不是很大），并且兼容性良好。兩種布局的實現方法前半部分相同，后半部分的實現各有利弊，下面會簡單介紹兩者的區別。
Demo和代碼圣杯布局Demo、代碼
雙飛翼布局Demo、代碼
兩種布局的實現首先，既然是三欄式布局我們需要三個div
圣杯布局 mainleftright
給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結構稍微改變一下：
雙飛翼布局 mainleftright
可以看到，我們在main里面又加了一個內容層。如果知道盒子模型，就知道我們是不能直接給main添加margin屬性，因為我們已經設置了width：100%，再設置margin的話就會超過窗口的寬度，所以我們再創造一個內容層，將所有要顯示的內容放到main-content中，給main-content設置margin就可以了。
因為不改變父元素所以只需要給main-content設置margin: 0 200px 0 200px;屬性就可以了達到效果
兩種布局的區別
圣杯布局是中間欄為兩邊騰開位置。
雙飛翼布局則是中間欄不變，將內容部分為兩邊騰開位置
https://www.cnblogs.com/lovem...
https://www.zhihu.com/questio...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115677.html
摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內容部分為兩邊騰開位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結過...
摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理 標簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...
摘要：如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局這是一道經典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過設置的左右來實現的。 如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...
摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。 本文首發于知乎專欄：前端指南 CSS布局 布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...
摘要：經典方法三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建的方式，通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網頁內容以三列的形式呈現。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...
閱讀 1442·2023-04-25 19:51
閱讀 1932·2019-08-30 15:55
閱讀 1744·2019-08-30 15:44
閱讀 2704·2019-08-30 13:58
閱讀 2699·2019-08-29 16:37
閱讀 1076·2019-08-29 15:34
閱讀 4004·2019-08-29 11:05
閱讀 2623·2019-08-28 17:51
