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

資訊專欄INFORMATION COLUMN

【布局】圣杯布局&雙飛翼布局

LeviDing / 1289人閱讀

摘要：差別通俗點(diǎn)講就是圣杯布局像是，杯子掛上兩只耳朵，，所有容量都給了杯身，耳朵只能掛在兩側(cè)。雙飛翼布局像是，鳥的雙翼，，身子是鳥的一大部分，雙翼也是身體的一部分。其他布局其他布局方案已經(jīng)整理到此文中，歡迎大家前往指正整理布局方案

背景 
隨著前端技術(shù)的發(fā)展推進(jìn)，web端的布局方式已基本成熟，那么在網(wǎng)站布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開(kāi)發(fā)者們開(kāi)始從效率的角度優(yōu)化自己的代碼
“如果三排布局能將中間的模塊放在dom樹前面，那么瀏覽器在做重繪的時(shí)候不久有限顯示了嗎？”
機(jī)制的開(kāi)發(fā)者們開(kāi)始圍繞者這個(gè)方向進(jìn)行了dom的優(yōu)化，于是誕生了兩種著名的布局方式，圣杯布局和雙飛翼布局
直奔主題

兩種布局的背景就不講了，直接上代碼

圣杯布局

【JsFiddle】
https://jsfiddle.net/zwwill/px57xzp4/


    
header

    

        
main

        
left

        
right

    

    

.container {width: 500px; margin: 50px auto;}
.wrapper {padding: 0 100px 0 100px;}
.col {position: relative; float: left;}
.header,.footer {height: 50px;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
雙飛翼布局 

ps: 
“這不是一樣的圖嘛？”
“對(duì)！就是一樣的，因?yàn)槭墙鉀Q同一種問(wèn)題的嘛?！?/p>

【JsFiddle】
https://jsfiddle.net/zwwill/5xjyeu9d/


    
header

    

        

            
main

        

        
left

        
right

    

    

.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
差別

通俗點(diǎn)講就是

圣杯布局像是，杯子（wrapper）掛上兩只“耳朵”（left，right），所有容量都給了杯身（main），耳朵只能掛在兩側(cè)。
雙飛翼布局像是，鳥（wrapper）的雙翼（left，right），身子（main）是鳥的一大部分，雙翼也是身體的一部分。

雖然比較抽象，但有助于對(duì)兩種布局的區(qū)分。實(shí)在看不懂就就代碼吧，本人“扯”的功力不太夠。

其他布局

其他布局方案已經(jīng)整理到此文中，歡迎大家前往指正

【整理】CSS布局方案

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

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

相關(guān)文章

  • 【布局】圣杯布局&雙飛翼布局

    摘要：差別通俗點(diǎn)講就是圣杯布局像是，杯子掛上兩只耳朵，，所有容量都給了杯身，耳朵只能掛在兩側(cè)。雙飛翼布局像是，鳥的雙翼，，身子是鳥的一大部分，雙翼也是身體的一部分。其他布局其他布局方案已經(jīng)整理到此文中，歡迎大家前往指正整理布局方案 背景 隨著前端技術(shù)的發(fā)展推進(jìn)，web端的布局方式已基本成熟，那么在網(wǎng)站布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開(kāi)發(fā)者們開(kāi)始從效率的角度優(yōu)化自己的代碼...

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

  • 圣杯布局和雙飛翼布局

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

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

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

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

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

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

0條評(píng)論

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