亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

cgspine / 3161人閱讀

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

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

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

上部和下部各自占領(lǐng)屏幕所有寬度。

上下部之間的部分是一個(gè)三欄布局。

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

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

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

浮動(dòng)實(shí)現(xiàn) 實(shí)現(xiàn)原理

外層框架

這里是頭部





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

填充三欄

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

這樣實(shí)現(xiàn)下來，因?yàn)楦?dòng)的關(guān)系，[middle]會(huì)占據(jù)[container]的所有部分，而左右兩塊區(qū)域都會(huì)被擠到下面，但是，由于第一步設(shè)置了內(nèi)邊距的關(guān)系，[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;
}

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

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

先移動(dòng)左邊，新加一個(gè)樣式 margin-left:-100%。這樣一來，因?yàn)楦?dòng)關(guān)系，就把左邊塊上移到了[middle]左側(cè)，與其交織在一起，而右側(cè)欄就自動(dòng)往左移動(dòng)。然后再給左側(cè)欄一個(gè)偏移量，偏移量恰好是其寬度，這一步要給[container]的position設(shè)成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;
}

移動(dòng)右邊

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

這里是頭部



    
中間部分

    
左邊

    
右邊






.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彈性盒子實(shí)現(xiàn)

彈性盒子用來實(shí)現(xiàn)圣杯布局特別簡(jiǎ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;
}

很簡(jiǎn)單，在寫html的時(shí)候，因?yàn)椴辉偕婕暗礁?dòng)，只需要按照左中右的順序來寫就可以了。左右兩塊區(qū)域的寬度寫死，把中間的區(qū)域的flex屬性設(shè)置成1就可以了。

css grid網(wǎng)格

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

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

先看一下代碼：



left


middle

     

   


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

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

首先給最外層的body設(shè)成display:grid。當(dāng)然，是外層父級(jí)元素即可，不一定是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格。

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

小結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115672.html

相關(guān)文章

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

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

    wqj97 評(píng)論0 收藏0

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

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

    callmewhy 評(píng)論0 收藏0

  • CSS布局十八般武藝都在這里了

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

    includecmath 評(píng)論0 收藏0

  • 前端面試之CSS總結(jié)(上)

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

    ?。?。 評(píng)論0 收藏0

  • CSS中的負(fù)邊距

    摘要：之后仔細(xì)的百度了一下，發(fā)現(xiàn)了這么一個(gè)叫做內(nèi)外補(bǔ)丁負(fù)值法的東西。在這個(gè)解決方案中，又涉及到了傳說中的負(fù)。深入研究之后又發(fā)現(xiàn)了圣杯布局雙飛翼布局等很多示例，確實(shí)要好好研究負(fù)邊距這個(gè)東西了。相關(guān)推薦那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距 2015-04-22 時(shí)候?qū)懙睦衔模驗(yàn)橄Ｍ盟阅昧顺鰜怼?那天被一個(gè)同學(xué)問了一個(gè)問題，三列的div，要求父div的高度和三個(gè)div的高度都和三個(gè)中字?jǐn)?shù)...

    cocopeak 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<