草案
本页尚未完工.
在这一点上，我们已经看了CSS基础，如何设置文本样式，以及如何设置和操纵内容所在的盒子。现在是时候看看如何把你的盒子放在正确的地方相对于视口，和彼此。我们已经涵盖了必要的先决条件，因此我们现在可以深入到CSS布局，查看不同的显示设置，包括浮动和定位的传统布局方法，以及像flexbox这样的新流行的布局工具。
适用于：
在开始前，你应该已经具备:
- 对HTML的基础了解，在Introduction to HTML部分讨论过的。
- 一定的CSS基础，在Introduction to CSS部分讨论过的。
- 知道怎么来使用框模型.
指南
这些文章将提供在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应用程序的控件，无论它们滚动到哪里。