CSS 布局
在前几期的模块中，我们学习了如何为内容容器设置样式和进行操作。现在是时候学习如何将这些容器在彼此之间以及与浏览器视口正确地布局了。本模块将介绍浮动 (floats)、定位 (positioning)、其他现代布局工具，以及构建能够适应不同设备、屏幕尺寸和分辨率的响应式设计。
预备知识
教程与挑战
- CSS 布局简介
-
本课程将回顾我们在前面模块中已经涉及的一些 CSS 布局特性，例如不同的
display值，并介绍本模块将要涵盖的一些概念。它还将深入介绍正常流 (normal flow) 的概念。 - 浮动
-
最初用于在文本块内浮动图像的
float属性，后来成为创建网页多栏布局最常用的工具之一。随着 flexbox 和 grid 的出现，它已回归其最初的用途，正如本文所述。 - 定位
-
定位允许您将元素移出正常的文档流，并使其表现不同，例如，叠放在一起，或者始终停留在浏览器视口内的相同位置。本文将介绍不同的
position值以及如何使用它们。 - Flexbox
-
Flexbox 是一种一维布局方法，用于以行或列的形式布局项目。项目会弹性地填充额外空间，并缩小以适应更小的空间。本文将介绍所有基本知识。
- CSS 网格布局
-
CSS 网格布局 (CSS grid layout) 是一个用于 Web 的二维布局系统。它允许您将内容组织成行和列，并提供许多功能来简化复杂布局的创建。本文将介绍开始使用网格布局所需的所有知识。
- 基础布局理解 挑战
-
本次挑战将测试您对本模块到目前为止所涵盖的布局特性（即 flexbox、floats、grid 和 positioning）的知识。完成后，您将使用多种技术开发出一个网页布局。
- 响应式设计
-
随着 Web 设备上出现越来越多的不同屏幕尺寸，响应式 Web 设计 (RWD) 的概念也应运而生：这是一套实践方法，允许网页根据不同的屏幕宽度、分辨率等调整其布局和外观。这是一个改变我们为多设备 Web 设计方式的理念，在本文中，我们将帮助您理解掌握它所需的主要技术。
- 媒体查询基础
-
CSS 媒体查询为您提供了一种仅在浏览器和设备环境匹配您指定的规则时应用 CSS 的方式。媒体查询是响应式 Web 设计的关键部分，因为它们允许您根据视口大小创建不同的布局。在本课程中，您将学习媒体查询中使用的语法，然后在一个交互式示例中使用它们，展示一个简单的设计如何变得响应式。
检验你的技能
您会在教程文章之间找到“测试您的技能”文章，以在您继续学习之前检查您是否保留了最重要的信息。如果您想一次性浏览所有这些内容，您可以在 测试您的技能：CSS 布局 中找到它们。
附加教程
这些教程不属于学习路径，但它们仍然很有趣——您应该将这些视为进阶目标，在完成主要的“核心”文章后可选择学习。
- 多列布局
-
多列布局 (multiple-column layout) 规范为您提供了一种将内容排版成列的方法，就像您在报纸上看到的那样。本文将介绍如何使用此功能。
- 实际定位示例
-
本文展示了如何构建一些真实世界的示例，以说明定位可以实现的功能。
- 旧版布局方法
-
网格系统是 CSS 布局中非常常见的功能，在 CSS 网格布局出现之前，它们通常使用浮动或其他布局功能来实现。您可以将布局想象成固定数量的列（例如 4、6 或 12 列），然后将内容列放入这些想象中的列中。在本文中，我们将探讨这些旧方法的工作原理，以便您了解它们在旧项目中的使用方式。
- 支持旧版浏览器
-
您的网站访问者可能包括使用旧版浏览器或不支持您实现的 CSS 功能的浏览器的用户。这是 Web 上一种常见的情况，新的功能不断添加到 CSS 中。浏览器对这些功能的支持程度各不相同，因为不同的浏览器倾向于优先实现不同的功能。本文将介绍作为 Web 开发人员，如何使用现代 Web 技术来确保您的网站对使用旧技术的用户保持可访问性。
另见
- CSS 布局食谱
-
CSS 布局食谱旨在汇集常见布局模式的解决方案，这些是您可能需要在网站上实现的。除了提供可作为项目起点的代码外，这些食谱还突出了布局规范的不同用法以及作为开发人员可以做出的选择。