2. 程式人生 > >理解聖杯布局和雙飛翼布局

理解聖杯布局和雙飛翼布局

阿新 • • 發佈：2019-02-26
oct 實現原理 charset ctype n) col str ood containe

一、共性和差異

首先兩個布局是有共性的：

  1. 實現效果一致：都是三欄布局，左右兩列寬度固定，中間列寬度自適應。中間列放重要的內容，因此在DOM結構中位置靠前優先渲染。
  2. 實現原理一致：都是將一個with：100%的浮動塊和另外兩個定寬浮動塊通過負外邊距和相對定位的方法實現最終布局，因此涉及到的方法包括：浮動、負外邊距和相對定位

其次同樣的實現效果之所以有兩個名字，本質上是因為實現思路不一樣，導致DOM結構不一樣。

二、實現思路

  1. 聖杯布局來源於In Search of the Holy Grail這篇文章，作者在寫DOM結構的思路是先寫一個框架：
<header>header</header>
<div id="container"></div>
<footer>footer</footer>

技術分享圖片
上邊一個header，下邊一個footer，中間一個容器，三個列的結構都寫在這個容器裏。
此時可以用這個container容器的左右內邊距(padding)確定中間列的位置，並給左右兩列留出空間。但是由於左右兩列也包含在這個container容器中，所以他們也跟著被推到了中間，就像這樣：
技術分享圖片
因此在使用負外邊距的方法將三個浮動塊放到一行之後，還需要用相對定位將左右兩個塊放到最終位置。

  1. 雙飛翼布局的思路是一個改良聖杯布局的過程，既然中間列需要布局，那就直接給它加個父元素，讓這個父元素的width：100%，使用中間列的左右外邊距(margin)確定位置，並留出左右空間，DOM結構如下：
<div id="container">
    <div id="middle" class="basic">middle</div>
</div>
<div id="left" class="basic">left</div>
<div id="right" class="basic">right</div>

在這樣的結構下，左右兩列沒有跟著被推到中間，因此只需要使用負外邊距就可以實現最終布局。

三、完整代碼

  1. 聖杯布局：
    DOM結構：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>聖杯布局</title>
        <link rel="stylesheet" href="holygrail.css">
    </head>
    <body>
        <header class="basic">header</header>
            <div id="container">
                <div id="middle" class="basic">middle</div>
                <div id="left" class="basic">left</div>
                <div id="right" class="basic">right</div>
            </div>
        <footer class="basic">footer</footer>
    </body>
</html>

CSS樣式：

body {
    margin: 0;
}

.basic {
    height: 50px;
    text-align: center;
    line-height: 50px;
}

header {
    background-color: aquamarine;
    
}

footer {
    background-color: burlywood;
    clear: left;
}

#container {
    padding: 0 300px 0 200px;
}

#middle {
    background-color: chartreuse;
    width: 100%;
    float: left;
}

#left {
    background-color: hotpink;
    width: 200px;
    float: left;
    margin-left: -100%;
    position: relative;
    right: 200px;
}

#right {
    background-color: silver;
    width: 300px;
    float: left;
    margin-right: -300px;
}
  1. 雙飛翼布局：
    DOM結構：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>雙飛翼布局</title>
        <link rel="stylesheet" href="flying-wing.css">
    </head>
    <body>
        <header class="basic">header</header>
            <div id="container">
                <div id="middle" class="basic">middle</div>
            </div>
            <div id="left" class="basic">left</div>
            <div id="right" class="basic">right</div>
        <footer class="basic">footer</footer>
    </body>
</html>

CSS樣式：

body {
    margin: 0;
}

.basic {
    height: 50px;
    text-align: center;
    line-height: 50px;
}

header {
    background-color: aquamarine;
}

footer {
    background-color: burlywood;
    clear: left;
}

#container {
    width: 100%;
    float: left;
}

#middle {
    background-color: chartreuse;
    margin: 0 300px 0 200px;
}

#left {
    background-color: hotpink;
    width: 200px;
    float: left;
    margin-left: -100%;
}

#right {
    background-color: silver;
    width: 300px;
    float: left;
    margin-left: -300px;
}

理解聖杯布局和雙飛翼布局

相關推薦

理解聖杯布局和雙飛翼布局

oct 實現原理 charset ctype n) col str ood containe 一、共性和差異 首先兩個布局是有共性的： 實現效果一致：都是三欄布局，左右兩列寬度固定，中間列寬度自適應。中間列放重要的內容，因此在DOM結構中位置靠前優先渲染。 實現原理一致：

聖杯布局和雙飛翼布局的實現過程

img sunshine 很多 toc 是把 優先 以及 watermark 完整 相信很多人都搜過聖杯布局和雙飛翼布局，也知道他們的由來，在這裏我就不一一贅述了，今天主要講的是當我遇到兩個布局時，我是怎樣一步一步從開始到實現的過程，例如：剛開始我也不懂為什麽聖杯布局和雙飛

CSS3之聖杯布局和雙飛翼布局

purple type htm osi img code 方便 overflow class 聖杯布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="

聖杯和雙飛翼布局

ati 兩個 div pad 遮擋 -h 布局 問題 position 聖杯布局： 原理：給包裹層設置左右padding值空出left和right的位置，使用負邊距，左邊margin-left：-100%，右邊margin-left：-100px；此時左右兩個盒子位於主盒子

布局——聖杯和雙飛翼布局

word 不換行 order 自己的 wrap borde 是我 pos 一個 css可以繼承的屬性有哪些？ Font 系列 text系列 color line-height border-radius的值的問題 四個值的順序是 左上 右上 右下 左下。 wh

聖杯布局and雙飛翼布局

content 尺寸 元素 不一定 oot alt ctype 間距 mar *聖杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

響應式布局之浮動聖杯布局（雙飛翼布局）—-自適應寬度布局

由於 部分 gin asi 禁用 代碼 寬度 sof cin 前端開發中自適應布局在實際應用中越來越普遍，特別是隨著更多高級瀏覽器的出現html5和css3得到了更好的應用。 聖杯布局有個好處，完全符合前端開發中漸進增強的理念，由於瀏覽器解析是從DOM的上至下，這樣聖杯布局

CSS布局 -- 聖杯布局 & 雙飛翼布局

clear targe 圖片 上一個 info copy OS 如果 tool 按照我的理解，其實聖杯布局跟雙飛翼布局的實現，目的都是左右兩欄固定寬度，中間部分自適應。 但在這裏實現起來還是有一些區別的 【聖杯布局】 在這裏，實現了左(200px) 右(22

使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局

head -h color ima details blue lex http eight 使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局 實現三欄水平布局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main

聖杯布局與雙飛翼布局全解

註意 bubuko nbsp 實現 自適應 lte .com 相對定位 data- 效果簡圖如下： 1、聖杯布局 註意middle寫在前面就行了，dom結構如下： DOM: <body> <div id

一個初學者對雙飛翼布局和聖杯布局的理解

head 給他 就是 固定 class ack scrip 特點 css Hi！大家好！歡迎大家進入我的博客！現在好多的大公司寫頁面的時候都會用到三欄布局，接下來要說的聖杯布局就是三欄布局中較為典型的例子。特點是，左右邊欄寬度固定，中間欄寬度自適應。廢話不多說直接上代碼。

雙飛翼布局和聖杯布局解析

出現 解釋 它的 詳細 部分 style image 簡單 延伸 今天突然想起了溫習一下css布局。之前看雙飛翼布局只是粗略的看了一下，大概明白怎麽做，但是並沒有去延伸一下...還有它的孿生兄弟：聖杯布局。今天仔細的琢磨了一下；突然發現其實內容還不少的樣子。 雙飛翼布局或者

聖杯布局/雙飛翼布局異同和比較

gin containe margin ont 100% oat ctype -1 main <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

css常見布局之三列布局--雙飛翼布局和聖杯布局

class 100% ron 中間 flow 一行 自適應 聖杯布局 使用 首先兩者都是兩邊寬度固定，中間寬度自適應，並且中間盒子(主題內容)放在最前面，以便優先渲染。 實現方案：都使用浮動來實現。 聖杯布局實現如下： <!DOCTYPE html>

雙飛翼布局與聖杯布局

聖杯布局 upload con 位置 container f2c apt 相對 mage 一、聖杯設計思路： DOM結構： <div class="container"> <div class="main">main</div>

雙飛翼布局以及聖杯布局

區域 自己 size 聖杯布局 ring ati -s position -a 雙飛翼布局和聖杯布局其實結果是一樣的，都是實現三欄布局，中間寬度自適應，兩端寬度固定，只是實現的方法不一樣 聖杯布局 　　三欄是獨立的，利用外層container的padding 以及 兩端的m

關於聖杯、雙飛翼布局

title clas nsf text ren sky none span border <!DOCTYPE html><html><head> <title>附加案例</title> <style type

聖盃佈局和雙飛翼佈局的理解和區別

連結 聖盃佈局和雙飛翼佈局基本上是一致的，都是兩邊固定寬度，中間自適應的三欄佈局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float:left浮動，區別在於解決中間欄div的內容不被遮擋上，聖盃佈局是中間欄在新增相對定位，並配合left和right屬性，效

HTML特殊布局--------雙飛翼布局

瀏覽器 lin child 固定 clas 自身 什麽 固定寬度 100% 今天看到以前寫的一篇布局的例子分享給大家，雙飛翼布局。 什麽是雙飛翼布局？？ 1.三列布局，中間寬度自適應，兩邊固定寬度; 2.中間欄在瀏覽器中優先展示渲染； 雙飛翼布局的原理：

雙飛翼布局

col width pan mage ges 縮放 元素 技術分享 影響 <style> *{ margin:0;padding:0; /* color:#fff; */ }