頁面佈局詳解(聖盃、雙飛翼、彈性佈局)

前言

---

聖盃佈局和雙飛翼佈局是頁面佈局的經常使用佈局方式。二者都是爲了實現兩側寬度固定，中間寬度自適應的三欄佈局，但二者在實現方式上有必定的差異,不過都遵循瞭如下要點：

• 兩側寬度固定，中間官渡自適應
• 中間部分在DOM結構上優先，以便先行渲染
• 容許三列中的任意一列成爲最高列
• 只須要一個額外的<div></div>標籤

  

1、聖盃佈局

實現方式：

1. 三者都設置向左浮動。
2. 設置中間寬度爲100%。
3. 設置容器的padding值給左右兩部分留出空間。
4. 左部分：設置margin-left爲-100%,定位設置爲relative，right設置爲width px
5. 右部分：設置margin-right爲-width px

HTML

<div class="header">Header</div>
<div class="container">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="footer">Footer</div>
複製代碼

• 主體main放在前面能夠優先加載
• 中間部分由container包裹的main、left、right三列組成，main寫在最前面

CSS

html,body {
    margin: 0;
    padding: 0;
    min-width: 600px;
    }
.header {
    height: 200px;
    background-color: #105B63;
}
.container {
    padding: 0 200px 0 200px;
}
.container > div {
    float: left;
}
.main {
    height: 200px;
    width: 100%;
    background-color: #DB9E36;
}
.left {
    width: 200px;
    height: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
    background-color: #FFFAD5;
}
.right {
    width: 200px;
    height: 200px;
    margin-right: -200px;
    background-color: #FFD34E;
}
.footer {
    height: 200px;
    clear: both;
    background-color: #BD4932;
}
複製代碼

2、雙飛翼佈局

HTML

<div class="header">Header</div>
<div class="container column">
    <div class="main">Main</div>
</div>
<div class="left column">Left</div>
<div class="right column">Right</div>
<div class="footer">Footer</div>
複製代碼

與聖盃佈局相比，雙飛翼HTML只爲main包裹了div，這是爲了處理margin中內容被遮蓋的問題。

CSS

html,body {
    margin: 0;
    padding: 0;
}
body {
    min-width: 450px;
}
.header {
    height: 160px;
    background-color: #DB9E36;
}
.container {
    width: 100%;
}
.column {
    float: left;
}
.main {
    height: 200px;
    margin: 0 200px 0 200px;
    background-color: #105B63;
}
.left {
    width: 200px;
    height: 200px;
    margin-left: -100%;
    background-color: #FFD34E;
}
.right {
    width: 200px;
    height: 200px;
    margin-left: -200px;
    background-color: #BD4932;
}
.footer {
    height: 200px;
    clear: both;
    background-color: #FFFAD5;
}
複製代碼

爲三個column設置float，採用負邊距將左、右測部分定外到container的margin留的空白處。 相比聖盃佈局，雙飛翼不比設置左右部分的position: relative，也不比設置left、right值，簡單了很多，但聖盃佈局的DOM結構更加直觀和天然。

3、Flex佈局

Flex佈局又稱彈性佈局，在實現上更簡單和實用。

HTML

<div class="header">Header</div>
<div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</div>
<div class="footer">Footer</div>
複製代碼

CSS

html,body {
    margin: 0;
padding: 0;
}
.header {
    height: 200px;
    background-color: #105B63;
}
.container {
    height: 200px;
    display: flex;
}
.left {
    width: 200px;
    background-color: #FFFAD5;
}
.main {
    flex: 1;
    background-color: #FFD34E;
}
.right {
    width: 200px;
    background-color: #BD4932;
}
.footer {
    height: 200px;
    background-color: #DB9E36;
}
複製代碼

本質上是利用flex: 1這個屬性，使中間部分main能夠自適應。