适用于：

在开始前，你应该已经具备:

1. 对HTML的基础了解，在Introduction to HTML部分讨论过的。
2. 一定的CSS基础，在Introduction to CSS部分讨论过的。
3. 知道怎么来使用框模型.

指南

这些文章将提供在CSS中可用的基本布局工具和技术的指导。

介绍 CSS 布局

本文将重述一些我们在之前的模块中已经涉及的CSS布局功能 - 例如不同的 display 值— 并介绍我们将在本单元中涵盖的一些概念。

  Floats 浮动方式

最初对于文本块中的浮动图像，float属性已经成为在网页上创建多个列布局的最常用工具之一。本文解释所有。

 Positioning 位置/定位

定位允许您从常规文档布局流程中取出元素,并使它们具有不同的行为，例如坐在另一个之上，或始终保持在浏览器视口内的同一位置。 本文解释不同的position 值，以及如何使用它们。

 Practical positioning examples 练习定位的案例

在最后一篇文章中介绍了定位的基础知识，现在将讨论构建几个真实世界的例子，以说明你可以通过定位做什么样的事情。

Flexbox 弹性盒子

一种新技术，但现在在各种浏览器中支持相当广泛的支持，Flexbox开始准备好广泛使用。 Flexbox提供了工具，允许快速创建复杂，灵活的布局，以及历史上被证明难以使用CSS的功能。本文解释所有的基本原理。

Grids 网格布局

网格系统是CSS布局中使用的另一个非常常见的特征，其趋向于使用浮动或其他布局特征来实现。您可以将布局设为一定数量的列（例如4,6或12），然后将内容列放在这些虚拟列中。在本文中，我们将探讨创建网格系统的基本思想，使用网格框架提供的现成网格系统，并通过实验CSS网格 - 一个新生的新的浏览器功能，使在网上实现网格设计更容易结束。. 

学习成果测验 Assessments

以下评估将测试您使用CSS布局网页的能力。

创建一个弹性盒子布局 Creating a flexible multicolumn layout

此评估测试您创建标准多列布局的能力，并具有一些有趣的功能。

创建一个固定的控制组件 Creating a fixed control widget

此评估测试您对定位的理解，要求您创建一个固定的位置控件小部件，允许用户访问Web应用程序的控件，无论它们滚动到哪里。

还可以参阅

• https://developer.mozilla.org/en-US/Learn/CSS/Basics/Layout