正在加载...

CSS 网站布局

Display 与 Position 讲清了盒子如何落位与堆叠。网站布局提出更大的问题：页眉、导航、主内容、侧栏、页脚这些页面区域，怎样平静地共享同一屏幕？先画出外壳；Flexbox 与 Grid 很快会深化分栏技巧。

布局区域工具箱

📊 页面区域一览

区域 日常职责
Header 站点身份、主要操作，有时还有搜索
Navigation 通往重要分区的链接（常在页眉内或下方）
Main 页面主题的主要内容
Aside / sidebar 相关链接、提示、次要卡片
Footer 法律说明、次要导航、联系线索
Container 用 max-width 包裹并居中可读内容

好的布局从 HTML 地标开始，再用 CSS 做间距与分栏。给每个盒子刷上 position: absolute 很少能扩展开。

语义化页面外壳

用真实元素命名区域。类名可细化外观，但地标让结构对读者与辅助技术保持诚实。

地标页面外壳

css 
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}

header,
nav,
main,
aside,
footer {
display: block;
}

居中的 max-width 容器

过长的行会累眼睛。用带 max-width 与水平 margin: auto 的容器包裹可读栏。

居中容器

css 
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}

页眉栏基础

页眉常铺满容器或全宽。保持内边距一致，把深层导航样式留给下一课。

简单页眉栏

css 
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}

.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}

简单双栏草图

在 Flexbox/Grid 课之前，平静的 float 草图可以展示 main + aside。真正的页面分栏请接着学 Flex/Grid——这是桥梁，不是永久方案。

main 加 aside 的 float 草图

css 
.layout {
display: flow-root;
}

.layout__main {
float: left;
width: 68%;
}

.layout__aside {
float: right;
width: 28%;
}

故事下方的页脚

浮动分栏之后，对页脚做 clear，让它落到两栏之下。之后 Flex/Grid 布局无需 float 清除习惯也能约束分栏。

分栏后的页脚

css 
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}

稳健的布局习惯

地标优先，容器其次，间距第三。float 只作临时分栏草图。在后续模块用 Flexbox 与 Grid 做耐用页面结构——不要 absolute 堆叠或永无的 float 网格。

命名布局角色

css 
.page {
min-height: 100vh;
}

.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }

自己动手

  1. 搭建地标外壳：header、nav、main、aside、footer。
  2. 用带 max-width 与居中边距的 .container 包裹内容。
  3. 用内边距与底边框样式化简单页眉栏。
  4. 用 float 宽度草绘 main + aside，再 clear 页脚。
  5. 写一句话：为什么稍后 Flex/Grid 会取代这个 float 草图？

常见错误

  • 用 absolute 定位页面每一栏
  • 文本铺满整视口宽度却没有 max-width
  • 跳过语义地标，堆匿名 div
  • 把本课当成 object-fit（媒体框，而非页面区域）
  • 永远交付 float 页面网格，却不去学接下来的 Flex/Grid

小结

  • 网站布局讲的是页面区域如何共享一块屏幕
  • 使用语义地标加上居中的 max-width 容器
  • float 的 main/aside 草图可简短示意分栏
  • 在 float 下方 clear 页脚；很快优先用 Flex/Grid 做结构
  • Layout ≠ object-fit——区域布局 vs 媒体装入盒子

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 41 的 47
Css 教程