《CSS 简易速速上手小册》第2章：CSS 布局与定位（2024 最新版）

2.1 Flexbox：灵活的布局解决方案

欢迎来到 Flexbox 的世界，一个让布局变得前所未有简单的 CSS3 新特性。Flexbox，全称为 Flexible Box，是一个为复杂布局而生的强大工具。它让我们可以在父容器中以一种灵活的方式对子元素进行排列和对齐，不论是水平还是垂直方向。

2.1.1 基础知识

• Flex 容器（Flex Container）：通过设置 display: flex; 或 display: inline-flex; 在一个元素上，这个元素就变成了一个 Flex 容器，其所有直接子元素成为 Flex 项目（Flex Items）。
• 主轴（Main Axis）和交叉轴（Cross Axis）：Flex 布局中有两个轴，主轴默认为水平方向，交叉轴为垂直方向，这可以通过 flex-direction 属性进行调整。
• Flex 方向（Flex Direction）：flex-direction 属性决定 Flex 项目的排列方向，可以是行（row）、行逆序（row-reverse）、列（column）或列逆序（column-reverse）。
• Flex 包裹（Flex Wrap）：flex-wrap 属性控制 Flex 项目是否换行显示。
• 对齐方式：justify-content 控制主轴上的对齐方式，align-items 控制交叉轴上的对齐方式，align-content 控制多行/列间的对齐方式。

2.1.2 重点案例：创建一个响应式导航菜单

让我们来创建一个简单且响应式的导航菜单，这个菜单将在大屏幕上水平显示，在小屏幕上转换为垂直堆叠。

• HTML 结构：

<nav class="flex-nav">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">服务</a>
  <a href="#">联系我们</a>
</nav>
1
2
3
4
5
6

• CSS 样式：

.flex-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #333;
}

.flex-nav a {
  color: white;
  padding: 10px;
  text-decoration: none;
  flex-grow: 1;
  text-align: center;
}

@media (max-width: 600px) {
  .flex-nav {
    flex-direction: column;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这个案例中，.flex-nav 容器在大屏幕上默认展示为一行，每个链接平等地占据空间（感谢 flex-grow: 1）。当屏幕尺寸小于 600px 时，通过媒体查询改变 flex-direction 为 column，使菜单垂直堆叠。

2.1.3 拓展案例 1：卡片布局

假设你需要创建一个产品展示页面，每个产品都是一个卡片，你想要它们在大屏幕上平均分布，在小屏幕上自适应堆叠。

• HTML 结构：

<div class="cards">
  <div class="card">卡片 1</div>
  <div class="card">卡片 2</div>
  <div class="card">卡片 3</div>
</div>
1
2
3
4
5

• CSS 样式：

.cards {
  display: flex;
  padding: 10px;
  justify-content: space-around;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  margin: 10px;
  min-width: 100px;
  background: lightgrey;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这个布局利用了 `

flex-wrap: wrap; 来确保卡片在必要时可以换行，flex: 1;让每个卡片都尽可能平等地占据空间，但min-width` 确保它们不会被挤得太小。

2.1.4 拓展案例 2：中心对齐的登录表单

创建一个登录表单，无论在何种屏幕尺寸下，总是垂直和水平居中显示。

• HTML 结构：

<div class="login-container">
  <form class="login-form">
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</div>
1
2
3
4
5
6
7

• CSS 样式：

.login-container {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.login-form > * {
  margin: 10px;
  padding: 5px;
}
1
2
3
4
5
6
7
8
9
10
11

通过设置 .login-container 的 justify-content 和 align-items 属性，我们可以轻松地实现表单在容器中的中心对齐，无论容器的大小如何变化。

通过这些案例，我们可以看到 Flexbox 提供了一个灵活而强大的方式来处理网页布局的挑战。不仅仅是导航菜单、卡片布局或是登录表单，几乎任何你能想到的布局都可以用 Flexbox 轻松实现。所以，开始使用 Flexbox 吧，享受它带来的布局自由和乐趣！

---

2.2 Grid 布局：网格系统的魔力

在 CSS 的宝库中，Grid 布局无疑是一颗璀璨的明珠。它为我们提供了一个二维布局系统，通过行和列的方式来组织内容，极大地增强了我们对网页布局的控制能力。让我们深入探索 Grid 布局的魔法，看看如何利用它来创造精美且功能强大的布局吧！

2.2.1 基础知识

• Grid 容器：通过将一个元素的 display 属性设置为 grid 或 inline-grid，你可以定义一个 Grid 容器，其直接子元素将成为 Grid 项。
• 行和列：可以使用 grid-template-rows 和 grid-template-columns 属性来定义 Grid 容器中的行和列的大小。
• Grid 网格线：Grid 布局是基于网格线的，这些网格线包括行网格线和列网格线，用于定位 Grid 项。
• Grid 区域：通过 grid-area 属性，可以将 Grid 项放置在容器的任何区域内，这些区域是由行网格线和列网格线定义的。
• 对齐和间隔：justify-items、align-items、justify-content、align-content 和 gap 属性允许你控制 Grid 项的对齐方式和行列之间的间隔。

2.2.2 重点案例：创建一个新闻网站的布局

想象你正在为一个新闻网站设计首页，需要一个包含头条新闻、多个新闻分类和侧边栏的复杂布局。

• HTML 结构：

<div class="news-grid">
  <div class="headline">头条新闻</div>
  <div class="category news">新闻</div>
  <div class="category sports">体育</div>
  <div class="category entertainment">娱乐</div>
  <div class="sidebar">侧边栏</div>
</div>
1
2
3
4
5
6
7

• CSS 样式：

.news-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 20px;
}

.headline {
  grid-column: 1 / -1; /* 占据整个宽度 */
}

.category {
  height: 200px;
}

.sidebar {
  grid-row: 2 / 4; /* 跨越两行 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这个布局利用了 Grid 的强大功能，创建了一个响应性强、结构清晰的新闻首页布局，头条新闻占据了上方的整个宽度，新闻分类在左侧分列显示，侧边栏在右侧跨越两行的高度。

2.2.3 拓展案例 1：画廊布局

为一家艺术画廊创建一个展示作品的网页布局，其中作品需要以不同的大小展示，以吸引访问者的注意。

• HTML 结构：

<div class="gallery">
  <div class="art large">大型艺术作品</div>
  <div class="art medium">中型艺术作品</div>
  <div class="art small">小型艺术作品</div>
  <!-- 更多艺术作品 -->
</div>
1
2
3
4
5
6

• CSS 样式：

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.art {
  background-color: #f0f0f0;
  padding: 20px;
}

.large {
  grid-column: span 2;
}

.medium {
  grid-column: span 1;
}

.small {
  grid-column: span 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

通过 grid-column: span X; 属性，我们可以控制每件艺术作品占据的列数，从而创造出一个动态且吸引人的画廊布局。

2.2.4 拓展案例 2：个人博客的文章布局

设计一个个人博客文章页面，包括文章内容、作者信息和相关文章推荐。

• HTML 结构：

<div class="blog-post">
  <div class="article">文章内容</div>
  <div class="author-info">作者信息</div>
  <div class="related-articles">相关文章</div>
</div>
1
2
3
4
5

• CSS 样式：

.blog-post {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

.article {
  grid-column: 1 / 2;
}

.author-info, .related-articles {
  grid-column: 2 / 3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在这个布局中，文章内容在左侧占据更大的空间，而作者信息和相关文章推荐则在右侧的较小空间内垂直排列，实现了清晰且易于阅读的文章布局。

通过这些案例，我们可以看到 Grid 布局如何使得创建复杂和响应式的网页布局变得简单且直观。无论是新闻网站的首页、艺术画廊的展示，还是个人博客的文章页面，Grid 都提供了强大而灵活的布局解决方案。掌握了 Grid，你就掌握了创建美观、实用且响应式布局的魔法。

---

2.3 定位技巧：Static、Relative、Absolute、Fixed 和 Sticky

在 CSS 的世界里，元素的定位是实现精确布局的关键。定位属性定义了元素在页面上如何定位，包括其在文档流中的行为和如何与其他元素相互作用。让我们深入了解这五种定位模式：static、relative、absolute、fixed 和 sticky，并探索它们如何让我们的布局工作变得更加灵活和强大。

2.3.1 基础知识

• Static（静态定位）：这是所有元素的默认定位方式。它们按照正常的文档流进行布局，不会被 top、right、bottom 或 left 属性影响。
• Relative（相对定位）：元素的位置相对于其在正常文档流中的位置进行调整。设置 top、right、bottom 或 left 属性会使其移动，但不会影响其他元素的位置。
• Absolute（绝对定位）：元素的位置相对于最近的非 static 定位的祖先元素进行定位。它从文档流中脱离，不占据空间，可能会覆盖页面上的其他元素。
• Fixed（固定定位）：元素的位置相对于浏览器窗口进行定位，即使滚动页面也会保持在固定位置。
• Sticky（粘性定位）：元素根据用户的滚动位置在 relative 和 fixed 定位之间切换。它在视口内滚动到达指定位置前是相对定位的，之后变为固定定位。

2.3.2 重点案例：创建一个固定在顶部的导航栏

一个常见的需求是，无论用户如何滚动页面，导航栏始终固定在页面的顶部。

• HTML 结构：

<div class="fixed-nav">
  <a href="#">首页</a>
  <a href="#">服务</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</div>
1
2
3
4
5
6

• CSS 样式：

.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  padding: 10px 0;
  z-index: 1000;
  text-align: center;
}

.fixed-nav a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

通过设置 position: fixed; 和 top: 0;，导航栏会固定在视口的顶部，不随页面滚动而移动。

2.3.3 拓展案例 1：模态弹窗

模态弹窗（Modal）是一种在当前页面上显示信息或表单的好方法，而不需要跳转到新页面。

• HTML 结构：

<div class="modal">
  <div class="modal-content">
    <span class="close-button">×</span>
    <p>这是一个模态弹窗！</p>
  </div>
</div>
1
2
3
4
5
6

• CSS 样式：

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

设置 .modal 的 position: fixed; 可以确保背景覆盖整个视口，而 .modal-content 则在视口中央显示。

2.3.4 拓展案例 2：使用 Sticky 定位实现粘性页脚

假设你希望页脚在内容足够长时位于页面底部，但当内容不够长无法填满视口时，页脚始终粘在视口底部。

• HTML 结构：

<div class="content">这里是内容...</div>
<footer class="sticky-footer">粘性页脚</footer>
1
2

• CSS 样式：

.sticky-footer {
  position: sticky;
  bottom: 0;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}
1
2
3
4
5
6
7
8

通过设置 position: sticky; 和 bottom: 0;，页脚在内容足够长时位于内容下方，内容不够长时则粘在视口底部。

通过这些案例，我们可以看到定位技巧在实现各种布局需求时的强大能力和灵活性。无论是创建固定导航栏、模态弹窗还是粘性页脚，理解并掌握这些定位技巧将使你能够更加自信地设计和实现复杂的布局。继续探索和实践，让你的网页更加动态和互动吧！