第6章：布局 --[CSS零基础入门]

CSS 布局是网页设计中至关重要的一个方面，它决定了页面上元素的排列和展示方式。以下是几种常见的 CSS 布局方法和技术：

1. 浮动布局（Float Layout）

浮动布局（Float Layout）曾经是网页设计中创建多列布局的常用方法。虽然现在更推荐使用 Flexbox 或 Grid 布局，但了解浮动的工作原理仍然很有用，尤其是在维护旧代码时。以下是一个简单的示例，展示了如何使用 float 属性来创建两列布局。

示例：使用 `float` 创建两列布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动布局示例</title>
<style>* {box-sizing: border-box;}.container {overflow: hidden; /* 清除浮动 */padding: 10px;background-color: #f4f4f4;}.column {float: left;width: 50%;padding: 15px;background-color: #ddd;margin-bottom: 10px;}.clearfix::after {content: "";clear: both;display: table;}
</style>
</head>
<body><div class="container clearfix"><div class="column" style="background-color:#bbb;"><h2>左侧栏</h2><p>这里是一些文本。</p></div><div class="column" style="background-color:#ccc;"><h2>右侧栏</h2><p>这里是更多的文本。</p></div>
</div></body>
</html>

在这里插入图片描述

解释：

* { box-sizing: border-box; }: 确保所有元素的宽度和高度计算包括填充和边框，这有助于避免布局问题。
.container: 包含两个浮动子元素的父容器。overflow: hidden; 用于清除浮动，确保父容器能够包裹住浮动的子元素。
.column: 定义了每个列的样式。float: left; 让它们向左浮动，并排显示。width: 50%; 确保每列占据一半的宽度。
.clearfix::after: 使用伪元素来清除浮动，这是一种常见的技术，用来防止父元素的高度塌陷。

在这个例子中，两个 .column 类的 div 将会并排显示，形成一个两列布局。请注意，为了保证良好的兼容性和可维护性，在现代开发中应优先考虑使用 Flexbox 或 Grid 布局方式。

2. 弹性盒子布局（Flexbox）

Flexbox 是一种一维布局模型，适用于单行或单列的项目排列，可以轻松实现对齐、分布空间等操作。

以下是使用 CSS 弹性盒子布局（Flexbox）的三个示例。每个示例展示了如何通过 Flexbox 实现不同的布局效果。

示例 1: 基本水平居中和垂直居中

这个例子展示了如何使用 Flexbox 实现一个简单的容器，其中的内容在水平和垂直方向上都居中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox 居中示例</title>
<style>.container {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */height: 300px;           /* 设置高度以便演示垂直居中 */border: 2px solid #ccc;}.item {padding: 20px;background-color: lightblue;}
</style>
</head>
<body><div class="container"><div class="item">我是居中的内容</div>
</div></body>
</html>

在这里插入图片描述

示例 2: 创建响应式卡片布局

这个例子展示了如何创建一行多个卡片，并让它们根据屏幕大小自动调整宽度和间距。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox 卡片布局示例</title>
<style>.card-container {display: flex;flex-wrap: wrap; /* 允许换行 */gap: 10px;       /* 卡片之间的间距 */}.card {flex: 1 1 calc(33.333% - 20px); /* 分配每张卡片的宽度 */min-width: 200px;               /* 最小宽度 */padding: 15px;background-color: lightcoral;border: 1px solid #ddd;box-sizing: border-box;}
</style>
</head>
<body><div class="card-container"><div class="card">卡片 1</div><div class="card">卡片 2</div><div class="card">卡片 3</div><div class="card">卡片 4</div><div class="card">卡片 5</div>
</div></body>
</html>

在这里插入图片描述

示例 3: 使用 `flex-grow` 和 `flex-shrink` 创建可扩展布局

此示例展示了如何使用 flex-grow 和 flex-shrink 来创建一个布局，其中一个项目占据剩余的所有空间，而其他项目保持固定宽度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox 可扩展布局示例</title>
<style>.container {display: flex;border: 2px solid #ccc;padding: 10px;}.sidebar {flex: 0 0 200px; /* 不增长、不缩小、宽度为200px */background-color: lightgreen;padding: 10px;}.main-content {flex-grow: 1; /* 占据所有剩余空间 */background-color: lightblue;padding: 10px;}
</style>
</head>
<body><div class="container"><div class="sidebar">侧边栏</div><div class="main-content">主要内容区域，会根据窗口大小自动调整。</div>
</div></body>
</html>

在这里插入图片描述

这些示例展示了如何利用 Flexbox 的强大功能来创建灵活且响应式的布局。通过控制项目的对齐方式、分布以及生长和收缩行为，你可以构建出既美观又实用的网页布局。

3. 网格布局（Grid Layout）

CSS Grid 提供了一种二维布局模型，允许你更精确地控制行和列，适合用来构建复杂的布局结构。

当然，以下是使用 CSS 网格布局（Grid Layout）的三个示例。每个示例展示了如何通过 Grid 实现不同的布局效果。

示例 1: 创建简单的网格布局

这个例子展示了如何创建一个基本的三列两行网格，并为每个单元格指定内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 基本布局示例</title>
<style>.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 创建三列 */grid-template-rows: auto;              /* 行高自动调整 */gap: 10px;                             /* 单元格之间的间距 */}.grid-item {background-color: lightblue;padding: 20px;text-align: center;}
</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
</div></body>
</html>

在这里插入图片描述

示例 2: 使用命名区域创建复杂布局

这个例子展示了如何定义和使用命名区域来创建复杂的布局，如带有头部、侧边栏和主要内容区的网页布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 命名区域布局示例</title>
<style>.grid-container {display: grid;grid-template-areas:"header header header""sidebar main main""footer footer footer";grid-template-columns: 1fr 2fr 1fr;grid-template-rows: auto;gap: 10px;height: 100vh;}.header {grid-area: header;background-color: lightcoral;}.sidebar {grid-area: sidebar;background-color: lightgreen;}.main {grid-area: main;background-color: lightblue;}.footer {grid-area: footer;background-color: lightgray;}
</style>
</head>
<body><div class="grid-container"><div class="header">Header</div><div class="sidebar">Sidebar</div><div class="main">Main Content</div><div class="footer">Footer</div>
</div></body>
</html>

在这里插入图片描述

示例 3: 使用 `grid-auto-flow` 创建动态布局

此示例展示了如何使用 grid-auto-flow 属性来创建一个能够根据内容自适应的网格布局。这里我们创建了一个项目列表，这些项目将根据可用空间自动排列。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 动态布局示例</title>
<style>.grid-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 10px;grid-auto-flow: dense; /* 允许更灵活的填充 */}.grid-item {background-color: lightyellow;padding: 20px;border: 1px solid #ddd;}.large {grid-column: span 2; /* 跨越两列 */}
</style>
</head>
<body><div class="grid-container"><div class="grid-item">Item 1</div><div class="grid-item large">Large Item (Span 2 Columns)</div><div class="grid-item">Item 2</div><div class="grid-item">Item 3</div><div class="grid-item">Item 4</div><div class="grid-item">Item 5</div><div class="grid-item">Item 6</div>
</div></body>
</html>

在这里插入图片描述

这些示例展示了 CSS Grid 的强大功能，它不仅可以让开发者轻松创建复杂的布局结构，还能实现响应式设计，使页面在不同设备上都有良好的显示效果。通过控制网格线、轨道大小、项目位置以及流动方式，你可以构建出既美观又实用的网页布局。

4. 表格布局（Table Layout）

虽然不常用作整体页面布局，但在某些情况下，如显示数据表时，使用 display: table 等属性可以创建基于表格的布局。

下面是一个使用 CSS 表格布局的示例。这个例子展示了如何使用 display: table、display: table-row 和 display: table-cell 等属性来创建一个类似于 HTML <table> 的布局。这种布局方式适用于需要模拟表格结构但又不想使用实际的 <table> 元素的情况。

示例：使用 CSS 创建表格布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 表格布局示例</title>
<style>.table-container {display: table;width: 100%;border-collapse: collapse; /* 合并边框 */}.row {display: table-row;}.cell {display: table-cell;padding: 15px;border: 1px solid #ddd;text-align: center;vertical-align: middle;}.header-cell {background-color: #f4f4f4;font-weight: bold;}
</style>
</head>
<body><div class="table-container"><div class="row"><div class="cell header-cell">Header 1</div><div class="cell header-cell">Header 2</div><div class="cell header-cell">Header 3</div></div><div class="row"><div class="cell">Row 1, Cell 1</div><div class="cell">Row 1, Cell 2</div><div class="cell">Row 1, Cell 3</div></div><div class="row"><div class="cell">Row 2, Cell 1</div><div class="cell">Row 2, Cell 2</div><div class="cell">Row 2, Cell 3</div></div>
</div></body>
</html>

在这里插入图片描述

解释：

.table-container: 使用 display: table 来定义一个容器作为表格。width: 100%; 让表格占据父元素的全部宽度。
.row: 使用 display: table-row 来定义每一行。这相当于 HTML 中的 <tr> 标签。
.cell: 使用 display: table-cell 来定义每个单元格。这相当于 HTML 中的 <td> 或 <th> 标签。这里设置了内边距（padding）、边框（border）和文本对齐方式。
.header-cell: 定义了表头单元格的样式，使用了背景颜色和加粗字体。

这种方法的一个优点是，它允许你使用语义化更强的 HTML 结构（如 <div>），同时仍然能够实现类似表格的布局效果。此外，这种方式在某些情况下可以提供更好的灵活性，比如当你想要更精细地控制布局或应用复杂的样式时。不过，在现代开发中，对于大多数布局需求，通常会优先考虑使用 Flexbox 或 Grid 布局。

5. 绝对定位（Absolute Positioning）

使用 position: absolute 可以将元素从文档流中移出，并相对于最近的已定位祖先元素进行定位。

下面是一个使用 CSS 绝对定位（Absolute Positioning）的示例。这个例子展示了如何将一个元素相对于其最近的已定位祖先元素进行定位。如果不存在这样的祖先元素，则相对于浏览器窗口进行定位。

示例：使用 `position: absolute` 创建绝对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 绝对定位示例</title>
<style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.relative-container {position: relative; /* 确定相对定位 */width: 100%;height: 200px;background-color: #f4f4f4;padding: 20px;box-sizing: border-box;}.absolute-box {position: absolute; /* 绝对定位 */top: 50px;          /* 距离顶部 50px */left: 50px;         /* 距离左边 50px */width: 200px;height: 100px;background-color: lightblue;padding: 10px;box-sizing: border-box;}.text {margin-top: 20px;}
</style>
</head>
<body><div class="relative-container"><div class="absolute-box">我是绝对定位的盒子。</div><p class="text">我是相对定位容器中的文本。</p>
</div></body>
</html>

在这里插入图片描述

解释：

.relative-container: 使用 position: relative 来定义一个相对定位的容器。这使得任何在其内部设置了 position: absolute 的子元素都会相对于这个容器来定位，而不是相对于整个页面。同时设置了宽度、高度和背景颜色，以便更容易观察效果。
.absolute-box: 使用 position: absolute 来创建一个绝对定位的盒子。通过设置 top 和 left 属性，可以精确控制该盒子相对于最近的已定位祖先元素的位置。这里我们让它距离顶部 50px，距离左侧 50px。此外，还设置了宽度、高度、背景颜色和内边距。
.text: 这个类只是为了让文本在容器中有一定的间距，不影响绝对定位的演示。

在这个例子中，.absolute-box 将会相对于 .relative-container 定位，即使 .relative-container 内还有其他内容，.absolute-box 也会根据指定的 top 和 left 值出现在固定位置上。如果你移除 .relative-container 的 position: relative，那么 .absolute-box 将会相对于浏览器窗口定位。

绝对定位非常适合用于需要精确定位的元素，比如模态框、工具提示或导航菜单等。不过需要注意的是，绝对定位的元素会被从正常的文档流中移出，这意味着它们不会影响其他元素的位置，并且可能会覆盖其他内容，所以在设计时要特别注意这一点。

6. 相对定位（Relative Positioning）

position: relative 使得元素相对于其正常位置进行偏移，但不会脱离文档流。

下面是一个使用 CSS 相对定位（Relative Positioning）的示例。相对定位允许你相对于元素原本的位置进行偏移，但不会将其从文档流中移出。这意味着其他内容会继续围绕着它布局，就像它没有被移动一样。

示例：使用 `position: relative` 创建相对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 相对定位示例</title>
<style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.container {background-color: #f4f4f4;padding: 20px;box-sizing: border-box;}.relative-box {position: relative; /* 相对定位 */top: 20px;          /* 向下偏移 20px */left: 20px;         /* 向右偏移 20px */width: 200px;height: 100px;background-color: lightblue;padding: 10px;box-sizing: border-box;}.text {margin-top: 20px;}
</style>
</head>
<body><div class="container"><div class="relative-box">我是相对定位的盒子。</div><p class="text">我是容器中的文本，环绕在相对定位的盒子周围。</p>
</div></body>
</html>

在这里插入图片描述

解释：

.container: 定义了一个简单的背景色和内边距，作为相对定位盒子的父容器。
.relative-box:
- 使用 position: relative 来创建一个相对定位的盒子。
- top: 20px; 和 left: 20px; 让这个盒子相对于它原本的位置向下和向右各偏移 20px。
- 设置了宽度、高度、背景颜色和内边距，以便更容易观察效果。
.text: 这个类只是为了让文本在容器中有一定的间距，并展示相对定位盒子周围的文本如何不受其位置变化的影响。

在这个例子中，.relative-box 将会相对于它原本应该在的位置移动，但是它的原始空间仍然会被保留，因此 .text 仍然会在 .relative-box 的下方，好像它没有被移动过一样。

相对定位非常适合用来微调元素的位置，而不需要改变页面的整体布局。它也常用于为绝对定位的子元素提供一个参考点。例如，你可以将一个父元素设置为相对定位，然后让它的子元素使用绝对定位来相对于父元素进行精确定位。

7. 固定定位（Fixed Positioning）

position: fixed 允许元素相对于浏览器窗口固定位置，即使页面滚动也保持不动。

下面是一个使用 CSS 固定定位（Fixed Positioning）的示例。固定定位允许你将元素相对于浏览器窗口进行定位，即使页面滚动，该元素也会保持在相同的位置。这对于创建导航栏、浮动按钮或任何需要始终可见的界面元素非常有用。

示例：使用 `position: fixed` 创建固定定位布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 固定定位示例</title>
<style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.content {height: 2000px; /* 让内容足够长以启用滚动 */background: linear-gradient(135deg, #f06, #396);padding: 20px;box-sizing: border-box;}.fixed-box {position: fixed; /* 固定定位 */top: 10px;       /* 距离顶部 10px */right: 10px;     /* 距离右侧 10px */width: 200px;padding: 10px;background-color: lightblue;border: 1px solid #ccc;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);z-index: 1000;   /* 确保它覆盖其他内容 */}
</style>
</head>
<body><div class="fixed-box">我是固定定位的盒子。<br>页面滚动时我仍然会保持在这里。
</div><div class="content"><p>滚动页面查看固定定位的效果。</p><!-- 其他内容 -->
</div></body>
</html>

在这里插入图片描述

解释：

.fixed-box:
- 使用 position: fixed 来创建一个固定定位的盒子。
- top: 10px; 和 right: 10px; 让这个盒子距离浏览器窗口的顶部和右侧各 10px。
- 设置了宽度、内边距、背景颜色、边框和阴影，以便更容易观察效果。
- z-index: 1000; 确保固定定位的盒子覆盖页面上的其他内容，避免被遮挡。
.content:
- 定义了一个足够长的高度来启用页面滚动，同时设置了渐变背景和一些填充，模拟页面的主要内容。

在这个例子中，.fixed-box 将会相对于浏览器窗口保持固定位置，无论用户如何滚动页面，它的位置都不会改变。这使得固定定位非常适合用于创建导航栏、返回顶部按钮或其他需要一直可见的UI组件。

8. 粘性定位（Sticky Positioning）

position: sticky 结合了相对定位和固定定位的特点，当用户滚动到某个阈值时，元素会“粘”在视口的特定位置。

下面是一个使用 CSS 粘性定位（Sticky Positioning）的示例。粘性定位是一种混合了相对定位和固定定位的行为：元素在页面滚动到特定阈值之前表现得像相对定位，一旦达到这个阈值，它就会“粘”在视口的某个位置，就像固定定位一样。

示例：使用 `position: sticky` 创建粘性定位布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 粘性定位示例</title>
<style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.container {padding: 20px;box-sizing: border-box;}.content {height: 2000px; /* 让内容足够长以启用滚动 */background: linear-gradient(135deg, #f06, #396);padding: 20px;box-sizing: border-box;}.sticky-box {position: -webkit-sticky; /* Safari */position: sticky;top: 10px; /* 当滚动到顶部时，盒子将停在这里 */background-color: lightblue;padding: 10px;border: 1px solid #ccc;margin-bottom: 20px;}
</style>
</head>
<body><div class="container"><div class="sticky-box">我是粘性定位的盒子。<br>滚动页面，我会在到达顶部 10px 的时候停下来。</div><div class="content"><p>滚动页面查看粘性定位的效果。</p><!-- 其他内容 --><p>继续滚动...</p><p>更多内容...</p></div>
</div></body>
</html>

在这里插入图片描述

解释：

.sticky-box:
- 使用 position: -webkit-sticky; 和 position: sticky; 来创建一个粘性定位的盒子。注意 -webkit-sticky 是为了兼容 Safari 浏览器。
- top: 10px; 设置了当页面滚动到这个盒子顶部距离浏览器窗口顶部 10px 时，它会“粘”在那里。
- 设置了背景颜色、内边距、边框和一些底部外边距，以便更容易观察效果。
.content:
- 定义了一个足够长的高度来启用页面滚动，同时设置了渐变背景和一些填充，模拟页面的主要内容。

在这个例子中，.sticky-box 在页面初始加载时表现得像相对定位，随着页面的滚动，一旦它的顶部边缘距离浏览器窗口顶部 10px，它就会“粘”住不动，直到页面滚动方向改变或离开其父容器的作用范围。这使得粘性定位非常适合用于创建随滚动固定的导航栏、侧边栏或其他需要在滚动过程中保持可见的UI组件。

粘性定位的一个常见用例是创建一个随着用户滚动页面而固定在顶部的导航菜单，但仅当用户滚动到该元素的位置时才生效。这种方式可以提供更好的用户体验，因为用户可以在浏览页面的同时轻松访问重要的导航链接。

9. 多列布局（Multi-column Layout）

CSS 多列布局可以让内容自动分布在多个列中，非常适合文本内容的排版。

当然，下面是一个使用 CSS 多列布局（Multi-column Layout）的示例。多列布局非常适合用来展示大量的文本内容，如新闻文章、博客帖子等，它可以让文本自动分布在多个列中，从而提高可读性和美观性。

示例：使用 `column-count` 和 `column-gap` 创建多列布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 多列布局示例</title>
<style>body {margin: 0;padding: 20px;font-family: Arial, sans-serif;background-color: #f4f4f4;}.multicol-container {column-count: 3; /* 设置为三列 */column-gap: 20px; /* 列之间的间距 */background-color: white;padding: 15px;box-sizing: border-box;}.multicol-container p {margin: 0; /* 移除段落默认的上下边距 */line-height: 1.6; /* 设置行高以增加可读性 */font-size: 16px;}@media (max-width: 768px) {.multicol-container {column-count: 2; /* 在较小屏幕上减少为两列 */}}@media (max-width: 480px) {.multicol-container {column-count: 1; /* 在非常小的屏幕上变为单列 */}}
</style>
</head>
<body><div class="multicol-container"><p>这是多列布局中的第一段文字。多列布局非常适合用于显示大量文本内容，如新闻文章或博客帖子。它可以提高文本的可读性和页面的美观性。</p><p>这是第二段文字。使用 CSS 的多列属性，你可以轻松创建响应式的多列布局，根据屏幕大小自动调整列数。</p><p>第三段文字。通过设置 column-count 和 column-gap 属性，你可以控制列的数量和列之间的间距。</p><p>第四段文字。在不同的屏幕尺寸下，我们可以使用媒体查询来调整列数，确保布局在各种设备上都能良好显示。</p><p>第五段文字。CSS 多列布局不仅限于文本，还可以包含图片和其他 HTML 元素，为网页设计提供了更多的灵活性。</p>
</div></body>
</html>

在这里插入图片描述

解释：

.multicol-container:
- 使用 column-count: 3; 来指定容器内的文本应该分布在三列中。
- column-gap: 20px; 设置了列与列之间的间距为 20px。
- 添加了背景颜色、内边距，并设置了盒模型为 box-sizing: border-box; 以便更好地控制布局。
.multicol-container p:
- 移除了段落默认的上下边距，以避免不必要的空白。
- 设置了行高和字体大小，以提高文本的可读性。
媒体查询:
- 当屏幕宽度小于等于 768px 时，将列数减少到两列 (column-count: 2;)。
- 当屏幕宽度小于等于 480px 时，进一步减少到单列 (column-count: 1;)，以适应移动设备的小屏幕。