CSS 的几种经典布局

概要

本篇文章主要介绍了 CSS 的几种经典布局以及它们之间的区别：

行布局
列布局
圣杯布局
双飞翼布局

本篇文章不涉及 CSS3 新特性实现布局的方式。

行布局

经典的行布局，就是页面的结构（头、主体内容、尾）都是一行行排列下来的，常用于网站首页，如 Layui 的首页。

<header class="header">Header</header>
<main class="main">Main</main>
<footer class="footer">Footer</footer>

.header,
.main,
.footer {
    /* 水平居中 */
    margin: 0 auto;
    /* 宽度自适应 */
    width: 80%;
    min-width: 1200px;
    text-align: center;
    color: #fff;
}

/* 头 */
.header {
    /* 头部固定 */
    position: fixed;
    right: 0;
    left: 0;
    height: 60px;
    line-height: 60px;
    background-color: blue;
    z-index: 1;
}

/* 主体内容 */
.main {
    position: relative;
    top: 60px;
    padding-top: 60px;
    height: 800px;
    line-height: 800px;
    background-color: orange;
}

/* 尾 */
.footer {
    position: relative;
    height: 100px;
    line-height: 100px;
    background-color: gray;
}

列布局

经典的列布局，就是页面内容按照多列划分。

<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>

.left {
    float: left;
    width: 20%;
    height: 100px;
    background-color: blue;
}

.main {
    float: left;
    width: 60%;
    height: 100px;
    background-color: orange;
}

.right {
    float: right;
    width: 20%;
    height: 100px;
    background-color: blue;
}

圣杯布局

圣杯布局是由国外的 Kevin Cornell 提出的一个布局模型概念，实现了三列布局，两边定宽，中间宽度自适应，且中间栏要在浏览器中优先展示渲染的需求。

实现思路：

将左、中、右栏目包裹在父容器中，给父容器设置左右与左、右栏目相同宽度的 padding，为左、右栏目预留空间;
为实现中间栏在浏览器中优先展示渲染，将中间栏的 DOM 写在最前面；
为左、中、右栏目设置浮动和相对定位 position: relative（用于将左、右栏目移动出父容器内容区）;
中间栏目采用 width: 100% 实现自适应；
左、右栏目利用 margin 与 left/right 移动到相应位置。

<!-- 父容器 -->
<div class="wrapper">
    <!-- 中间栏在前 -->
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

.wrapper {
    /* 为左右栏目预留空间 */
    padding: 0 220px;
}

.left,
.main,
.right {
    float: left;
    position: relative;
}

.left,
.right {
    width: 220px;
    height: 100px;
}

.main {
    width: 100%; /* 宽度自适应 */
    height: 100px;
}

.left {
    margin-left: -100%; /* 移动到父容器最左边 */
    left: -220px; /* 移出父容器内容区，窗口靠左 */
}

.right {
    margin-left: -220px; /* 移动到父容器最右边 */
    right: -220px; /* 移出父容器内容区，窗口靠右 */
}

圣杯布局

双飞翼布局

双飞翼布局是针对圣杯布局改良后得出的，去掉了相对布局，只需要浮动和负边距。它们解决的是同样的问题。并且都可以兼容几乎所有的浏览器（IE6+，现代浏览器）。

实现思路：

只将中间栏目包裹在父容器中，给中间栏父容器设置 width: 100% 实现自适应;
为实现中间栏在浏览器中优先展示渲染，将中间栏的 DOM 写在最前面；
为左、中、右栏目设置浮动;
中间栏目利用 margin 为左、右栏目预留等宽度的空间；
左、右栏目利用 margin 移动到相应位置。

<!-- 父容器 -->
<div class="main">
    <div class="inner-main">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>

.main {
    width: 100%;
}
.inner-main {
    margin: 0 220px;
    height: 100px;
}

.left,
.main,
.right {
    float: left;
}

.left,
.right {
    width: 220px;
    height: 100px;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -220px;
}

如果只需要兼容 IE8+，那么可以使用 box-sizing: border-box 来改进双飞翼布局，不需要引入额外的辅助元素来包裹中间栏。代码这里就不写了哦 ~