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

資訊專欄INFORMATION COLUMN

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

zqhxuyuan / 3614人閱讀

摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實(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)靜下來(lái)反省了一下并不是我不熟，只是我開(kāi)始瞧不上網(wǎng)頁(yè)制作這種工作了，問(wèn)我css問(wèn)題時(shí)，我感覺(jué)就像是再問(wèn)一個(gè)老粉刷匠這片墻面要從哪里刷起，從哪里刷不行 ？這有什么決定性的問(wèn)題嗎 ？
說(shuō)的有點(diǎn)多，其實(shí)寫(xiě)這邊文章的主要目的還是想告訴自己，不要瞧不起某一門技術(shù)，技術(shù)有高低，但不代表學(xué)css的人的技術(shù)就要比學(xué)js的智商低，術(shù)業(yè)有專攻，心態(tài)要自己掌握，不要受外界的影響。

圣杯布局&雙飛翼布局

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

圣杯布局

以下面html為例：


    

        
main

        
left

        
right

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

css代碼：
雙飛翼布局

雙飛翼布局的html：

    

        

            
main

        

        
left

        
right

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

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

未完待續(xù)...

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

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

相關(guān)文章

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

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

    includecmath 評(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

  • CSS布局

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

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

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

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

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

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

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

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

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

0條評(píng)論

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