三種方式實現(xiàn)圣杯布局

cgspine 發(fā)布于2019-08-30 13:58 / 3120人閱讀

摘要：本文會用三種方法來實現(xiàn)圣杯布局，分別是浮動，以及。先移動左邊，新加一個樣式。小結(jié)總的來說，我認為使用彈性盒子布局實現(xiàn)圣杯模式是最方便最快速且不用擔心移動端的適配問題。

圣杯布局的三種實現(xiàn)

圣杯布局是一種很常見的css布局。他要求：

上部和下部各自占領屏幕所有寬度。

上下部之間的部分是一個三欄布局。

三欄布局兩側(cè)寬度不變，中間部分自動填充整個區(qū)域。

中間部分的高度是三欄中最高的區(qū)域的高度。

本文會用三種方法來實現(xiàn)圣杯布局，分別是浮動，flexbox以及css grid。

浮動實現(xiàn) 實現(xiàn)原理

外層框架

這里是頭部

這里是底部

.header,.footer{
    height:200px;
    width:100%;
    background:red;
}
.container{
    padding-left:200px;
    padding-right:300px;
}

填充三欄

這一步驟，首先給底部區(qū)域清除浮動，防止跟隨上邊的區(qū)域一起浮動。
另外：把中，左，右三個區(qū)域設置成度浮動。給左右兩塊區(qū)域固定的寬度，中間部分的寬度設置成100%。

這樣實現(xiàn)下來，因為浮動的關系，[middle]會占據(jù)[container]的所有部分，而左右兩塊區(qū)域都會被擠到下面，但是，由于第一步設置了內(nèi)邊距的關系，[container]的左右各剩余了一塊區(qū)域，且寬度與左右區(qū)域相同。

這里是頭部

    中間部分
    左邊
    右邊

這里是底部


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    width:300px;
    background:aqua;
}

移動左側(cè)區(qū)域

接下來要做的就是把左右兩塊區(qū)域挪到空出來的內(nèi)邊距空間里去。

先移動左邊，新加一個樣式 margin-left:-100%。這樣一來，因為浮動關系，就把左邊塊上移到了[middle]左側(cè)，與其交織在一起，而右側(cè)欄就自動往左移動。然后再給左側(cè)欄一個偏移量，偏移量恰好是其寬度，這一步要給[container]的position設成relative

這里是頭部

    中間部分
    左邊
    右邊

這里是底部


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
}

移動右邊

同上一步的原理一樣，把右側(cè)區(qū)域也給弄上去，設置負外邊距和本身寬度相同就行了。

這里是頭部

    中間部分
    左邊
    右邊

這里是底部


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
    margin-right:-300px;
}

特別完美~

flexbox彈性盒子實現(xiàn)

彈性盒子用來實現(xiàn)圣杯布局特別簡單。只需要把中間的部分用flex布局即可。

這里是頭部

    左邊
    中間部分
    右邊

這里是底部


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.container{
    display: flex;
}
.middle{
    flex: 1;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    background: aqua;
    width:300px;
}

很簡單，在寫html的時候，因為不再涉及到浮動，只需要按照左中右的順序來寫就可以了。左右兩塊區(qū)域的寬度寫死，把中間的區(qū)域的flex屬性設置成1就可以了。

css grid網(wǎng)格

grid是一種新的布局方式，截止2018年初，絕大多數(shù)瀏覽器都已經(jīng)支持css grid。
其原理就是把頁面的區(qū)域劃分成一個一個的網(wǎng)格，就和圍棋的棋盤一樣。

用網(wǎng)格來解決圣杯問題，可以擺脫彈性盒子時需要格外加一個[container]的問題，也就是左中右三款區(qū)域不需要在他們外邊包裝一個額外的div。

先看一下代碼：

header
left
middle
right     
footer
   


body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
    
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}

簡單說一下代碼的實現(xiàn)?；仡^會專門看一下css grid的細節(jié)。

首先給最外層的body設成display:grid。當然，是外層父級元素即可，不一定是body。

grid-row就是說由上到下，#header占據(jù)第1格，#left,#middle,#right占據(jù)第2格，#footer占據(jù)第3格。

而grid-column表示，在橫向從左向右，分成了五格。其中#header和#footer占據(jù)全部。#left占據(jù)第1格，#middle占據(jù)第2到第4格，#right占據(jù)第5格。

不管是實現(xiàn)起來還是理解起來都很方便。
關于css grid，下次繼續(xù)總結(jié)。

小結(jié)

總的來說，我認為使用彈性盒子布局實現(xiàn)圣杯模式是最方便最快速且不用擔心移動端的適配問題。而css grid網(wǎng)格，并不是所有瀏覽器都支持，所以，暫時不太建議大規(guī)模使用。至于，第一種方法，面試的時候準備準備還是很有好處的。

GPU云服務器云服務器圣杯布局 ddos三種攻擊方式服務器的三種存儲方式阿里云發(fā)送郵件的三種方式

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115672.html

四種方法實現(xiàn)──三欄布局（圣杯布局、雙飛翼布局）

摘要：圣杯布局雙飛翼布局本質(zhì)上都是三欄布局中間自適應兩邊固定寬。二說明網(wǎng)上有人提到這個方法在某些情況下會出現(xiàn)，具體沒有深入了解過。這個方法兼容性有比較大的問題，網(wǎng)上有不少文章提到瀏覽器還沒有提供支持，實際上新版主流瀏覽器已經(jīng)支持了。圣杯布局、雙飛翼布局,本質(zhì)上都是三欄布局──中間自適應兩邊固定寬。有一次面試，要求寫出三種實現(xiàn)方式，結(jié)果只寫出了兩種，面試官說基礎還不夠扎實~嗚圣杯布局圣杯...

wqj97 2019-08-23 15:16 評論0 收藏0
四種方法實現(xiàn)──三欄布局（圣杯布局、雙飛翼布局）

摘要：圣杯布局雙飛翼布局本質(zhì)上都是三欄布局中間自適應兩邊固定寬。二說明網(wǎng)上有人提到這個方法在某些情況下會出現(xiàn)，具體沒有深入了解過。這個方法兼容性有比較大的問題，網(wǎng)上有不少文章提到瀏覽器還沒有提供支持，實際上新版主流瀏覽器已經(jīng)支持了。圣杯布局、雙飛翼布局,本質(zhì)上都是三欄布局──中間自適應兩邊固定寬。有一次面試，要求寫出三種實現(xiàn)方式，結(jié)果只寫出了兩種，面試官說基礎還不夠扎實~嗚圣杯布局圣杯...

callmewhy 2019-08-02 14:16 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會被擠到下一列圣杯布局和雙飛翼布局都會用到?？梢酝ㄟ^設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發(fā)于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現(xiàn)方式（包括傳統(tǒng)的...

includecmath 2019-08-29 12:17 評論0 收藏0
前端面試之CSS總結(jié)(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

?。?。 2019-08-29 11:18 評論0 收藏0
CSS中的負邊距

摘要：之后仔細的百度了一下，發(fā)現(xiàn)了這么一個叫做內(nèi)外補丁負值法的東西。在這個解決方案中，又涉及到了傳說中的負。深入研究之后又發(fā)現(xiàn)了圣杯布局雙飛翼布局等很多示例，確實要好好研究負邊距這個東西了。相關推薦那些年，奇妙的圣杯與雙飛翼，還有負邊距 2015-04-22 時候?qū)懙睦衔?，因為希望引用所以拿了出來?那天被一個同學問了一個問題，三列的div，要求父div的高度和三個div的高度都和三個中字數(shù)...

cocopeak 2019-08-29 10:57 評論0 收藏0