CSS 网页布局

下面是一份关于 CSS 网页布局 的中文详解，涵盖从传统到现代的各种布局方式、响应式设计以及最佳实践，帮助你快速掌握常见的页面布局模式。

---

一、标准文档流（Normal Flow）

• 块级元素（Block）：独占一行，宽度默认填满父容器，可上下堆叠。
• 行内元素（Inline）：与文字同在一行，宽高由内容决定，不可直接设置宽高。
• 行内块元素（Inline‑block）：兼具二者特性，可与文字同行，又能设置宽高。

示例：

<header>头部</header>
<main>主体内容</main>
<footer>底部</footer>

header, main, footer {
  display: block;
  padding: 1rem;
  background: #f5f5f5;
  margin-bottom: 1rem;
}

---

二、浮动布局（Float）

适用场景：图文环绕、旧版两栏/三栏布局

• float: left/right; 让元素脱离标准流，后续内容环绕。
• 必须清除浮动（clearfix / overflow-hidden / 空元素）以避免父容器高度塌陷。

.sidebar { float: left; width: 25%; }
.content { float: right; width: 70%; }
.clearfix::after { content: ""; display: table; clear: both; }

---

三、定位布局（Position）

• position: relative; 相对自身位置微调，并可作为子元素的定位参考。
• position: absolute; 脱离文档流，完全参考最近已定位父容器。
• position: fixed; 脱离文档流，固定于视口。
• position: sticky; 粘性定位，根据滚动在 relative 与 fixed 之间切换。

.navbar { position: fixed; top: 0; left: 0; width: 100%; }
.banner img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

---

四、弹性盒子布局（Flexbox）

适用场景：一维布局（单行或单列），如导航栏、按钮组、卡片排布

• 容器：display: flex;
• 主轴对齐：justify-content（左/中/右/两端/等间距）
• 交叉轴对齐：align-items（顶部/中部/底部）
• 弹性子项：flex: [grow] [shrink] [basis]

<nav class="nav"><a>首页</a><a>服务</a><a>联系</a></nav>

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav a {
  padding: 0.5rem 1rem;
}

---

五、网格布局（Grid）

适用场景：二维布局（行×列），如复杂版面、图片廊、仪表盘

• 容器：display: grid;
• 定义行列：grid-template-columns、grid-template-rows
• 间距：grid-gap（row-gap、column-gap）
• 区域命名：grid-template-areas

<div class="layout">
  <header>头</header>
  <nav>导航</nav>
  <main>主</main>
  <aside>侧栏</aside>
  <footer>底</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "nav     main"
    "footer  footer";
  height: 100vh;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

---

六、多栏布局（Multi‑Column）

适用场景：文字长篇排版，报纸式多栏

.article {
  column-count: 3;
  column-gap: 1rem;
}
.article p {
  break-inside: avoid;
}

---

七、响应式设计（Responsive）

• 媒体查询：根据屏幕宽度/分辨率调整布局@media (max-width: 768px) { .layout { grid-template-columns: 1fr; grid-template-areas: "header" "nav" "main" "footer"; } }
• 弹性单位：%、vw/vh、fr、minmax()、auto-fit/auto-fill
• 移动优先：默认移动布局，再通过媒体查询扩展到更大屏幕

---

八、现代布局最佳实践

1. 优先使用 Flex/Grid，取代浮动与定位做整体布局
2. 布局与组件分离：容器用 Flex/Grid、模块内部再用局部布局
3. 保持层级简单：避免过深嵌套，提升渲染性能与可维护性
4. 语义化 HTML：用 <header>、<nav>、<main>、<section> 等标签
5. 辅助工具：可用 CSS 预处理器（Sass/LESS）封装布局 mixin，或用布局框架（Bootstrap、Tailwind）

---

掌握以上布局模型，你即可灵活构建从简单页面到复杂应用的各种响应式布局。任何具体场景有疑问，欢迎继续交流！