阅读 519

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

前言


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

  • 两侧宽度固定,中间官渡自适应
  • 中间部分在DOM结构上优先,以便先行渲染
  • 允许三列中的任意一列成为最高列
  • 只需要一个额外的<div></div>标签
    圣杯布局和双飞翼布局

一、圣杯布局

实现方式:

  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包裹的mainleftright三列组成,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;
}
复制代码

二、双飞翼布局

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结构更加直观和自然。

三、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可以自适应。

关注下面的标签,发现更多相似文章
评论