三種方式實現圣杯布局

cgspine 發布于2019-08-30 13:58 / 3107人閱讀

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

圣杯布局的三種實現

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

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

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

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

中間部分的高度是三欄中最高的區域的高度。

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

浮動實現 實現原理

外層框架

這里是頭部

這里是底部

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

填充三欄

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

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

這里是頭部

    中間部分
    左邊
    右邊

這里是底部


.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;
}

移動左側區域

接下來要做的就是把左右兩塊區域挪到空出來的內邊距空間里去。

先移動左邊，新加一個樣式 margin-left:-100%。這樣一來，因為浮動關系，就把左邊塊上移到了[middle]左側，與其交織在一起，而右側欄就自動往左移動。然后再給左側欄一個偏移量，偏移量恰好是其寬度，這一步要給[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;
}

移動右邊

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

這里是頭部

    中間部分
    左邊
    右邊

這里是底部


.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彈性盒子實現

彈性盒子用來實現圣杯布局特別簡單。只需要把中間的部分用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的時候，因為不再涉及到浮動，只需要按照左中右的順序來寫就可以了。左右兩塊區域的寬度寫死，把中間的區域的flex屬性設置成1就可以了。

css grid網格

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

用網格來解決圣杯問題，可以擺脫彈性盒子時需要格外加一個[container]的問題，也就是左中右三款區域不需要在他們外邊包裝一個額外的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;
}

簡單說一下代碼的實現。回頭會專門看一下css grid的細節。

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

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

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

不管是實現起來還是理解起來都很方便。
關于css grid，下次繼續總結。

小結

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115672.html

四種方法實現──三欄布局（圣杯布局、雙飛翼布局）

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

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

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

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

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

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

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

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

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

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