页面布局详解(圣杯、双飞翼、弹性布局)

前言

---

圣杯布局和双飞翼布局是页面布局的经常使用布局方式。二者都是为了实现两侧宽度固定，中间宽度自适应的三栏布局，但二者在实现方式上有必定的差异,不过都遵循了如下要点：

• 两侧宽度固定，中间官渡自适应
• 中间部分在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能够自适应。