CSS 布局
到目前为止，我们已经了解了 CSS 基础知识，如何样式化文本，以及如何样式化和操作内容所在的盒子。现在，是时候看看如何正确地将盒子排列到视窗以及相互之间。我们已经介绍了必要的先决条件，所以让我们深入研究 CSS 布局，看看各种功能，例如：不同的显示设置、定位、Flexbox 和 CSS 网格等现代布局工具，以及您可能仍然需要了解的一些传统技术。
先决条件
指南
这些文章将提供关于 CSS 中可用的基本布局工具和技术的说明。课程结束时有一个评估，可以帮助您通过布局网页来检查您对布局方法的理解。
- CSS 布局简介
-
本文将回顾我们在之前的模块中已经涉及的一些 CSS 布局功能 - 例如不同的
display值 - 并介绍一些在本模块中涵盖的概念。 - 普通流
-
网页上的元素会按照普通流进行布局 - 除非我们采取措施进行改变。本文解释了普通流的基础知识，作为学习如何改变它的基础。
- Flexbox
-
Flexbox 是一种一维布局方法，用于将项目排列成行或列。项目会灵活地填充额外的空间，并在较小的空间中缩小以适应。本文解释了所有基础知识。学习完本指南后，您可以 测试您的 Flexbox 技能，以检查您在继续学习之前的理解。
- 网格
-
CSS 网格布局是 Web 的二维布局系统。它允许您将内容排列成行和列，并且具有许多使构建复杂布局变得简单直观的功能。本文将为您提供开始页面布局所需的一切，然后 测试您的网格技能，然后再继续学习。
- 浮动
-
最初用于在文本块中浮动图像，
float属性成为在网页上创建多列布局最常用的工具之一。随着 Flexbox 和网格的出现，它现在已经回归其原始目的，本文对此进行了说明。 - 定位
-
定位允许您将元素从正常的文档布局流中取出，并使其表现不同，例如，彼此重叠，或始终保持在浏览器视窗内的相同位置。本文介绍了不同的
position值以及如何使用它们。 - 多列布局
-
多列布局规范提供了一种将内容排列成多列的方法，就像您在报纸上看到的那样。本文介绍了如何使用此功能。
- 响应式设计
-
随着越来越多的不同屏幕尺寸出现在支持网络的设备上，响应式网页设计 (RWD) 的概念出现了：一套允许网页改变其布局和外观以适应不同屏幕宽度、分辨率等的实践。这是一个改变了我们为多设备网络设计方式的想法，在这篇文章中，我们将帮助您了解掌握它所需要的关键技术。
- 媒体查询入门
-
CSS 媒体查询 为您提供了一种仅在浏览器和设备环境匹配您指定的规则（例如，“视窗宽度大于 480 像素”）时才应用 CSS 的方法。媒体查询是响应式网页设计的关键部分，因为它们允许您根据视窗的大小创建不同的布局。它们还可以用于检测您的网站运行环境的其他功能，例如，用户是否使用的是触摸屏而不是鼠标。在本课程中，您将首先了解媒体查询中使用的语法，然后您将在一个交互式示例中使用它们，展示如何使一个简单的设计具有响应性。
- 传统布局方法
-
网格系统是 CSS 布局中非常常见的特性。在CSS 网格布局之前，它们倾向于使用浮动或其他布局功能来实现。您首先会将您的布局想象成一组固定的列（例如，4、6 或 12 列），然后您将您的内容列放到这些虚拟列中。在本文中，我们将探讨这些旧方法是如何工作的，以便您了解如果您在较旧的项目上工作时它们是如何被使用的。
- 支持旧版浏览器
-
在本模块中，我们建议使用 flexbox 和网格作为您设计的核心布局方法。但是，您将来开发的网站肯定会有一些访问者使用旧的浏览器，或者不支持您使用的方法的浏览器。这种情况在网络上总是会发生——随着新功能的开发，不同的浏览器会优先考虑不同的功能。本文介绍了如何在不排除使用旧技术的用户的条件下使用现代网络技术。
评估
以下评估将测试您对上述指南中介绍的 CSS 布局方法的理解。
- 布局基础理解
-
一项评估，通过布局一个网页来测试您对不同布局方法的知识。