国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

圣杯布局和雙飛翼布局

468122151 / 1782人閱讀

摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁(yè)面的形象表達(dá)。一起來(lái)看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。

稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問(wèn)的問(wèn)題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來(lái)最好的用戶(hù)體驗(yàn)嘛~

事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應(yīng)，也就是我們常說(shuō)的固比固布局。它們實(shí)現(xiàn)的效果是一樣的，差別在于其實(shí)現(xiàn)的思想。

圣杯布局的出現(xiàn)是來(lái)自于a list part上的一篇文章In Search of the Holy Grail。比起雙飛翼布局，它的起源不是源于對(duì)頁(yè)面的形象表達(dá)。在西方，圣杯是表達(dá)“渴求之物”的意思。而雙飛翼布局則是源于淘寶的UED，可以說(shuō)是靈感來(lái)自于頁(yè)面渲染。一起來(lái)看看這兩種布局的區(qū)別在哪：

一、雙飛翼布局

可以看到，我們?cè)趍ain里面又加了一個(gè)內(nèi)容層。如果知道盒子模型，就知道我們是不能直接給main添加margin屬性，因?yàn)槲覀円呀?jīng)設(shè)置了width：100%，再設(shè)置margin的話(huà)就會(huì)超過(guò)窗口的寬度，所以我們?cè)賱?chuàng)造一個(gè)內(nèi)容層，將所有要顯示的內(nèi)容放到main-content中，給main-content設(shè)置margin就可以了。

因?yàn)椴桓淖兏冈厮灾恍枰omain-content設(shè)置margin: 0 200px 0 200px;屬性就可以了達(dá)到效果

通過(guò)縮放頁(yè)面就可以發(fā)現(xiàn)，隨著頁(yè)面的寬度的變化，這三欄布局是中間盒子優(yōu)先渲染，兩邊的盒子框子固定不變，即使頁(yè)面寬度變小，也不影響我們的瀏覽。如果你有了那么一點(diǎn)理解以后，我們來(lái)看看圣杯布局的實(shí)現(xiàn)：

二、雙飛翼布局
第一步：給出HTML結(jié)構(gòu)：

Header內(nèi)容區(qū)

中間彈性區(qū)

左邊欄

右邊欄

Footer內(nèi)容區(qū)

寫(xiě)結(jié)構(gòu)的時(shí)候要注意，父元素的的三欄務(wù)必先寫(xiě)中間盒子。因?yàn)橹虚g盒子是要被優(yōu)先渲染嘛~并且設(shè)置其自適應(yīng)，也就是width:100%。 第二步：給出每個(gè)盒子的樣式

header{width: 100%;height: 40px;background-color: darkseagreen;}

.container{ height:200px;overflow:hidden;}

.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}

.left{ width: 200px;height: 200px;background-color: blue;float:left;}

.right{width: 200px;height: 200px;background-color: darkorchid;float:left;}

footer{width: 100%; height: 30px;background-color: darkslategray;}

第三步：看此時(shí)的效果圖

大家可以看到，三欄并沒(méi)有在父元素的一行顯示，就是因?yàn)橹虚g盒子我們給了百分之百的寬度。所有左右兩個(gè)盒子才會(huì)被擠下來(lái)。
那么如何讓它們呈現(xiàn)出一行三列的效果呢？那就要讓左邊的盒子要到中間盒子的最左邊，右邊的盒子到中間盒子的最右邊。換個(gè)想法，如果中間盒子不是100%的寬度，那么按照文檔流，左邊的盒子一定會(huì)在中間盒子的后面顯示，接著顯示右邊的盒子。但是現(xiàn)在中間盒子是滿(mǎn)屏了的，所以左右兩個(gè)盒子被擠到下一行顯示。我們要做到的是讓左右兩個(gè)盒子都上去。此時(shí)，CSS的負(fù)邊距(negative margin)該上陣了。

第四步：利用負(fù)邊距布局
1.讓左邊的盒子上去

需要設(shè)置其左邊距為負(fù)的中間盒子的寬度，也就是.left {margin-left:-100%;}。這樣左盒子才可以往最左邊移動(dòng)。

2.讓右邊的盒子上去

需要設(shè)置其左邊距為負(fù)的自己的寬度，也就是.right {margin-left：-200px;}。這樣右盒子才可以在一行的最右邊顯示出自己。

第五步：看此時(shí)的效果圖

第六步：讓中間自適應(yīng)的盒子安全顯示

首先:利用父級(jí)元素設(shè)置左右內(nèi)邊距的值，把父級(jí)的三個(gè)子盒子往中間擠。

代碼如下：

.container{ padding: 0 200px;} 這里的200px是左右盒子的寬度。

效果如下：

我們可以看到，左右兩邊的內(nèi)邊距是有了，但是中間盒子上的內(nèi)容還是被壓著。

其次:給左右兩個(gè)盒子加一個(gè)定位，加了定位之后左右兩個(gè)盒子就可以設(shè)置left和right值。

代碼如下：

.left{ position: relative; left: -200px;}

.right{position: relative;right: -210px;

現(xiàn)在，圣杯布局終于搞定了，也實(shí)現(xiàn)了我們要的效果，左右側(cè)的盒子固定，中間盒子自適應(yīng)，而且中間盒子的內(nèi)容完全不受影響。你是不是也懂了呢? 真心希望對(duì)你有幫助。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114594.html

相關(guān)文章

  • 圣杯布局和雙飛翼布局

    摘要：解決的問(wèn)題圣杯布局和雙飛翼布局解決的問(wèn)題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以?xún)?yōu)先渲染。 解決的問(wèn)題 圣杯布局和雙飛翼布局解決的問(wèn)題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以?xún)?yōu)先渲染。 圣杯布局 圣杯布局dom結(jié)構(gòu)： 圣杯布局 ...

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

  • CSS布局--圣杯布局和雙飛翼布局以及使用Flex實(shí)現(xiàn)圣杯布局

    摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實(shí)解決的問(wèn)題是相同的，都是解決左右兩欄固定寬度，中間部分自適應(yīng)，其中某部分內(nèi)容比其他內(nèi)容高的時(shí)候，保證三者元素等高。雙飛翼用在外層多加了一個(gè)然后改用。 前言 我曾一度覺(jué)得總寫(xiě)css的前端很low，有了這種思想以后我便遠(yuǎn)離網(wǎng)頁(yè)布局，H5的工作更不想接，沉迷于頁(yè)面邏輯和封裝組件。直到最近我面試，面試官說(shuō)我css3理解的不熟，我起初很不屑，但后來(lái)靜...

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

  • 兩招搞定三欄布局——圣杯布局、雙飛翼布局

    摘要：如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局這是一道經(jīng)典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過(guò)設(shè)置的左右來(lái)實(shí)現(xiàn)的。 如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

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

  • 圣杯布局和雙飛翼布局

    摘要：參考文章同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別經(jīng)典布局圣杯布局實(shí)現(xiàn)的效果主要在中，和固定寬度，首先渲染，且自適應(yīng)寬度。 ps: 參考文章 DotHide同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別 經(jīng)典布局 圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

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

  • 淺談面試中常考的兩種經(jīng)典布局——圣杯與雙飛翼

    摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫(xiě)這種布局，一直沒(méi)有總結(jié)過(guò)正好借這次機(jī)會(huì)總結(jié)一波，同時(shí)加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個(gè)問(wèn)題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開(kāi)位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫(xiě)這種布局，一直沒(méi)有總結(jié)過(guò)...

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

  • 淺談面試中常考的兩種經(jīng)典布局——圣杯與雙飛翼

    摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫(xiě)這種布局，一直沒(méi)有總結(jié)過(guò)正好借這次機(jī)會(huì)總結(jié)一波，同時(shí)加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個(gè)問(wèn)題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開(kāi)位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫(xiě)這種布局，一直沒(méi)有總結(jié)過(guò)...

    劉厚水 評(píng)論0 收藏0

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

0條評(píng)論

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