CSS 网页布局

网页布局指把内容组织成头部、导航、内容区、侧栏、页脚等区块的页面骨架。早期用 table 拼格子、后来靠 float 浮动，如今 Flexbox 与 Grid 是主流。思路始终一致：先分大块、再排小块。本节演示一套完整的常见布局骨架。

布局前的准备

所有元素默认按文档流自上而下堆叠。做布局前通常先清零外边距并限制内容宽度居中：

* { box-sizing: border-box; }              /* 宽高包含内边距边框，方便计算 */
body { margin: 0; font-family: "Microsoft YaHei", sans-serif; }
.container { max-width: 1200px; margin: 0 auto; } /* 大屏居中，小屏占满 */

效果：全站内容在大屏上居中留白、小屏自动贴边，是页面统一的视觉基线。

头部与导航

header 放站点标题，nav 里的链接用 flex 排成横向菜单：

.header { background: #333; color: #fff; padding: 20px; text-align: center; }
.nav { display: flex; background: #f1f1f1; }   /* flex 一行排列菜单 */
.nav a { padding: 12px; text-decoration: none; color: #333; }
.nav a:hover { background: #ddd; }             /* 悬停高亮菜单项 */

<div class="header"><h1>我的博客</h1></div>
<div class="nav">
  <a href="#">首页</a><a href="#">教程</a><a href="#">关于</a>
</div>

效果：深色标题条加横向导航，鼠标经过菜单项时背景变灰。

两列布局：float 经典做法

内容占 70%、侧栏占 30%，靠 float 让两栏并排：

.column { float: left; padding: 15px; }
.left { width: 70%; }
.right { width: 30%; }
.row::after { content: ""; display: table; clear: both; } /* 清除浮动 */

效果：左宽右窄两栏并排；父容器必须清除浮动，否则会高度塌陷。若改用 flex，把 .row 设为 display:flex 即可自动并排且两边等高，无需处理清除浮动。

三列布局：Grid 现代方案

内容分多栏时，Grid 两行代码即可切成 1:3:1 三列：

.grid {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; /* 三列宽度比例 */
    gap: 15px;                          /* 列间距 */
}

<div class="grid">
  <aside>左栏：广告</aside>
  <main>主内容：文章正文</main>
  <aside>右栏：相关推荐</aside>
</div>

效果：三栏自动排布、间距统一由 gap 控制，比 float 直觉且健壮得多。

页脚与整体骨架

页脚常用深色横条收尾：

.footer {
    background: #333; color: #fff;
    text-align: center; padding: 15px; margin-top: 20px;
}

将 header → nav → 内容列 → footer 依序组合，即得完整页面骨架；需要适配手机时，再叠加媒体查询让栏目在窄屏纵向堆叠（详见“媒体查询”一节）。

小结

布局核心是“分块 + 排列”：清 margin、用容器限宽居中，内容用 flex/grid 排栏，最后用 clear 或 gap 处理间距。先把骨架搭对，再填细节，任何页面都能顺理成章地铺开。