資訊專欄INFORMATION COLUMN
摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機(jī)會總結(jié)一波，同時加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考
圣杯和雙飛翼布局介紹
最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機(jī)會總結(jié)一波，同時加強(qiáng)一下自己的理解。
博客鏈接：http://www.xluos.com/index.ph...
圣杯布局和雙飛翼布局作為經(jīng)典的三欄式布局是面試中的?？汀煞N布局達(dá)到效果上基本相同，都是兩邊兩欄寬度固定，中間欄寬度自適應(yīng)。在HTML結(jié)構(gòu)上中間欄在最前面保證了最先渲染中間提升性能（因?yàn)檫@兩種布局都比較老，我認(rèn)為在現(xiàn)代瀏覽器中這點(diǎn)兒性能優(yōu)化效果并不是很大），并且兼容性良好。兩種布局的實(shí)現(xiàn)方法前半部分相同，后半部分的實(shí)現(xiàn)各有利弊，下面會簡單介紹兩者的區(qū)別。
Demo和代碼圣杯布局Demo、代碼
雙飛翼布局Demo、代碼
兩種布局的實(shí)現(xiàn)首先，既然是三欄式布局我們需要三個div
圣杯布局 mainleftright
給main設(shè)置width: 100%,讓它始終占滿窗口，這樣才有自適應(yīng)的效果。
然后我們給它加上點(diǎn)兒樣式區(qū)分，效果如下：
為了形成在一行三欄布局，給三個方塊都加上浮動float: left;（注意清除浮動，因?yàn)楦訒?dǎo)致父元素高度塌陷）
接著我們要把三個方塊拉到一行，這里要利用負(fù)margin的技巧。
left要放到main的左邊，設(shè)置margin-left: -100%,因?yàn)?b>margin的百分比是相對與父元素的，所以需要整整一行的寬度才能補(bǔ)償這個margin的值，所以left就能到main的左邊。
接著讓right到main的右邊，只需要設(shè)置margin-left的值為負(fù)的right的寬，比如margin-left: -200px;，正好使main重疊right的寬度，因?yàn)樵O(shè)置了浮動所以right就會到main的右邊了。
下面我們來看一下效果：
看樣子好像我們已經(jīng)成功達(dá)到了效果？不要急給兩個方塊變透明，再給中間加點(diǎn)兒內(nèi)容看看。
我們發(fā)現(xiàn)當(dāng)內(nèi)容變多之后，因?yàn)槿齻€方塊都是設(shè)置的浮動，脫離的文檔流，兩邊固定寬度的兩欄會擋住我們的內(nèi)容。
所以要想兩邊不遮擋內(nèi)容，就需要中間欄給兩邊的位置騰出來。我們可以想到padding和margin都可以用來騰出位置，這兩個屬性就是圣杯布局的雙飛翼布局的區(qū)別，不過雙飛翼布局還需要稍微改造一下HTML的結(jié)構(gòu)，這個等一下再說。
1.圣杯布局——使用padding屬性第一步：為三個元素的父元素加上padding屬性，騰開位置
第二步：由于騰開位置后會產(chǎn)生空白，所以使用position: relative;屬性來移動左右兩欄，這樣就不會遮擋了。
不過這樣布局有一個問題就是：有一個最小寬度，當(dāng)頁面小于最小寬度時布局就會亂掉。所以最好給body設(shè)置一個min-width。這個min-width肯定不能是試出來的，怎么計(jì)算呢？就是left-width * 2 + right-width，至于為什么，簡單的說就是：“由于設(shè)置了相對定位，所以當(dāng)left原來的位置和right的位置產(chǎn)生重疊時，由于浮動的原因一行放不下就會換行”。所以布局就被打亂了。使用雙飛翼布局就可以避免這個問題。
2.雙飛翼布局——使用margin屬性首先我們要對HTML結(jié)構(gòu)稍微改變一下：
雙飛翼布局 mainleftright
可以看到，我們在main里面又加了一個內(nèi)容層。如果知道盒子模型，就知道我們是不能直接給main添加margin屬性，因?yàn)槲覀円呀?jīng)設(shè)置了width：100%，再設(shè)置margin的話就會超過窗口的寬度，所以我們再創(chuàng)造一個內(nèi)容層，將所有要顯示的內(nèi)容放到main-content中，給main-content設(shè)置margin就可以了。
因?yàn)椴桓淖兏冈厮灾恍枰omain-content設(shè)置margin: 0 200px 0 200px;屬性就可以了達(dá)到效果
兩種布局的區(qū)別
圣杯布局是中間欄為兩邊騰開位置。
雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置
https://www.cnblogs.com/lovem...
https://www.zhihu.com/questio...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51846.html
摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機(jī)會總結(jié)一波，同時加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結(jié)過...
摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...
摘要：如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局這是一道經(jīng)典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過設(shè)置的左右來實(shí)現(xiàn)的。 如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...
摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對布局，以及對應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...
摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...
閱讀 662·2021-11-24 09:39
閱讀 3507·2019-08-30 15:53
閱讀 2545·2019-08-30 15:44
閱讀 3262·2019-08-30 12:54
閱讀 2234·2019-08-29 12:23
閱讀 3330·2019-08-26 14:05
閱讀 2131·2019-08-26 13:36
閱讀 3462·2019-08-26 13:33
