CSS 布局
至此，我们已经了解了 CSS 基础知识、如何设置文本样式以及如何设置内容所在框的样式和操作。现在是时候看看如何正确排列盒子相对于视口以及彼此之间的关系了。我们已经介绍了必要的先决条件，所以让我们深入研究 CSS 布局，看看以下各种功能：不同的显示设置、定位、现代布局工具（如 Flexbox 和 CSS 网格）以及你可能仍想了解的一些遗留技术。
¥At this point, we've looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to correctly arrange your boxes in relation to the viewport as well as to one another. We've covered the necessary prerequisites, so let's dive deep into CSS layout, looking at such various features as: different display settings, positioning, modern layout tools like flexbox and CSS grid, and some of the legacy techniques you might still want to know about.
先决条件
¥Prerequisites
在开始本模块之前，你应该已经：
¥Before starting this module, you should already:
注意：如果你正在使用无法创建自己的文件的计算机/平板电脑/其他设备，你可以尝试在线编码程序（例如 JSBin 或 Glitch）中的（大部分）代码示例。
¥Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.
指南
¥Guides
这些文章将提供有关 CSS 中可用的基本布局工具和技术的说明。课程结束时进行评估，通过布置网页来帮助你检查你对布局方法的理解。
¥These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods by laying out a webpage.
- CSS 布局简介
-
本文将回顾我们在之前的模块中已经接触过的一些 CSS 布局功能（例如不同的
display值），并介绍我们将在本模块中涵盖的一些概念。 - 正常流量
-
网页上的元素按照正常流程自行布局 - 直到我们采取行动改变这一点。本文介绍了正常流程的基础知识，作为学习如何更改正常流程的基础。
- 弹性盒
-
弹性盒 是一种一维布局方法，用于按行或列布局项目。物品可以弯曲以填充额外的空间，也可以收缩以适应较小的空间。本文解释了所有基础知识。学习完本指南后，你可以在继续之前检查你的理解情况。
- 网格
-
CSS 网格布局是用于 Web 的二维布局系统。它允许你将内容按行和列布局，并且具有许多使构建复杂布局变得简单的功能。本文将为你提供开始页面布局所需了解的所有信息，然后在继续之前了解 测试你的网格技能。
- 花车
-
float属性最初用于文本块内的浮动图片，后来成为在网页上创建多列布局的最常用工具之一。随着 flexbox 和 grid 的出现，它现在已经恢复了其最初的用途，正如本文所解释的那样。 - 定位
-
定位允许你将元素从正常的文档布局流中取出，并使它们具有不同的行为，例如，通过相互叠放，或者始终保留在浏览器视口内的同一位置。本文介绍了不同的
position值以及如何使用它们。 - 多列布局
-
多列布局规范为你提供了一种按列布局内容的方法，就像你在报纸中看到的那样。本文介绍了如何使用此功能。
- 响应式设计
-
随着网络设备上出现更加多样化的屏幕尺寸，响应式网页设计（RWD）的概念也出现了：一组允许网页改变其布局和外观以适应不同的屏幕宽度、分辨率等的实践。这个想法改变了我们设计多设备网络的方式，在本文中我们将帮助你 了解掌握它所需的主要技术。
- 媒体查询初学者指南
-
CSS 媒体查询为你提供了一种仅当浏览器和设备环境与你指定的规则（例如 "视口宽度超过 480 像素"）匹配时才应用 CSS 的方法。媒体查询是响应式网页设计的关键部分，因为它们允许你根据视口的大小创建不同的布局。它们还可以用于检测站点运行环境的其他功能，例如，用户是否使用触摸屏而不是鼠标。在本课程中，你将首先了解媒体查询中使用的语法，然后在交互式示例中使用它们，展示如何使简单的设计变得响应式。
- 传统的布局方法
-
网格系统是 CSS 布局中非常常见的功能。在 CSS 网格布局之前，它们往往使用浮动或其他布局功能来实现。你首先将布局想象为一定数量的列（例如 4、6 或 12），然后将内容列放入这些假想的列中。在本文中，我们将探讨这些旧方法的工作原理，以便你了解在处理旧项目时如何使用它们。
- 支持旧版浏览器
-
在此模块中，我们建议使用 flexbox 和 grid 作为设计的主要布局方法。然而，将来你开发的网站中肯定会有使用较旧浏览器或不支持你所使用方法的浏览器的访问者。在网络上永远都是这样 - 随着新功能的开发，不同的浏览器将优先考虑不同的功能。本文解释了如何在不排除使用旧技术的用户的情况下使用现代网络技术。
评估
¥Assessments
以下评估将测试你对上述指南中涵盖的 CSS 布局方法的理解。
¥The following assessment will test your understanding of the CSS layout methods covered in the guides above.
- 基本布局理解
-
通过布置网页来测试你对不同布局方法的了解的评估。