CSS 的几种经典布局

首发地址： http://ieun.gitee.io/blog/pages/7d8fb2/

概要

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

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

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

行布局

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

• DOM

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

• CSS

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

/* 头 */
.header {
   
    /* 头部固定 */
    position: fixed;
    right: 0;
    left: