成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

zqhxuyuan / 3619人閱讀

摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應(yīng)，其中某部分內(nèi)容比其他內(nèi)容高的時候，保證三者元素等高。雙飛翼用在外層多加了一個然后改用。

前言

我曾一度覺得總寫css的前端很low，有了這種思想以后我便遠離網(wǎng)頁布局，H5的工作更不想接，沉迷于頁面邏輯和封裝組件。直到最近我面試，面試官說我css3理解的不熟，我起初很不屑，但后來靜下來反省了一下并不是我不熟，只是我開始瞧不上網(wǎng)頁制作這種工作了，問我css問題時，我感覺就像是再問一個老粉刷匠這片墻面要從哪里刷起，從哪里刷不行 ？這有什么決定性的問題嗎 ？
說的有點多，其實寫這邊文章的主要目的還是想告訴自己，不要瞧不起某一門技術(shù)，技術(shù)有高低，但不代表學css的人的技術(shù)就要比學js的智商低，術(shù)業(yè)有專攻，心態(tài)要自己掌握，不要受外界的影響。

圣杯布局&雙飛翼布局

所謂圣杯布局和雙飛翼布局其實解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應(yīng)，其中某部分內(nèi)容比其他內(nèi)容高的時候，保證三者元素等高。
他倆的區(qū)別就是：圣杯用padding。雙飛翼用在main外層多加了一個div然后改用margin。

圣杯布局

以下面html為例：


    

        
main

        
left

        
right

1.main、left、right全部左浮動，在設(shè)置一個position：relative稍后會用到。
2.main的寬度設(shè)置為100%。left和right固定寬度（假設(shè)100px）。
3.此時main自己沾滿了一行，所以給left拽上來設(shè)置marginleft：100%，此時left雖然上來了但是是覆蓋在main上面的。
4.給content設(shè)置padding-left等于left的寬，此時左邊有100px的空白，main和left都被擠過來了，要想還原，將left向左在移動100px就行了。
5.此時就剩下right在下面，同理margin-right：-100%就上去了。

css代碼：
雙飛翼布局

雙飛翼布局的html：

    

        

            
main

        

        
left

        
right

對比一下css的區(qū)別：多了一個.main-inner，少了一些相對定位。
Flex布局

相比較兩者，F(xiàn)lex布局就好理解得多
html和圣杯布局一樣
css：

未完待續(xù)...

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

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

相關(guān)文章

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

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

    includecmath 評論0 收藏0

  • 圣杯布局和雙飛翼布局

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

    ZweiZhao 評論0 收藏0

  • CSS布局

    摘要：圣杯布局圣杯布局和雙飛翼布局都是為了解決兩邊定寬，中間自適應(yīng)的三欄布局，中間欄在最前面優(yōu)先渲染，多見于商城類網(wǎng)站布局。雙飛翼布局不用設(shè)置相對布局，以及對應(yīng)的和值。 合理的布局是產(chǎn)品的基礎(chǔ)，可以使人感覺整齊大方，提升用戶體驗。掌握幾種常見的布局形式也是前端開發(fā)的基礎(chǔ)，對于快速實現(xiàn)頁面重構(gòu)有很大幫助。 原文鏈接 單列布局 單列布局通常用于網(wǎng)站的首頁，分為頭部的導航、網(wǎng)頁內(nèi)容、頁腳相關(guān)信息。...

    kviccn 評論0 收藏0

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標簽前端本文主要對布局中常見的經(jīng)典問題進行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...

    Amos 評論0 收藏0

  • CSS三欄布局的經(jīng)典實現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節(jié)和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

    neuSnail 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<