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

LeviDing 發布于2019-08-01 17:36 / 1284人閱讀

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

背景

隨著前端技術的發展推進，web端的布局方式已基本成熟，那么在網站布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的代碼
“如果三排布局能將中間的模塊放在dom樹前面，那么瀏覽器在做重繪的時候不久有限顯示了嗎？”
機制的開發者們開始圍繞者這個方向進行了dom的優化，于是誕生了兩種著名的布局方式，圣杯布局和雙飛翼布局

直奔主題

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

圣杯布局

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


    header
    
        main
        left
        right
    
    footer

.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:
“這不是一樣的圖嘛？”
“對！就是一樣的，因為是解決同一種問題的嘛。”

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


    header
    
        
            main
        
        left
        right
    
    footer

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

差別

通俗點講就是

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

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

其他布局

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

【整理】CSS布局方案

GPU云服務器云服務器圣杯布局雙飛翼布局 div布局布局html 排版布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51250.html

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

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

jonh_felix 2019-08-29 13:27 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。圣杯布局圣杯布局dom結構：圣杯布局 ...

yankeys 2019-08-29 13:54 評論0 收藏0
兩招搞定三欄布局——圣杯布局、雙飛翼布局

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

Kaede 2019-08-29 16:19 評論0 收藏0
CSS布局--圣杯布局和雙飛翼布局以及使用Flex實現圣杯布局

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

zqhxuyuan 2019-08-30 14:11 評論0 收藏0
圣杯布局和雙飛翼布局

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

ZweiZhao 2019-08-29 16:13 評論0 收藏0