MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

草案
本页尚未完工.

在这一点上,我们已经看了CSS基础,如何设置文本样式,以及如何设置和操纵内容所在的盒子。现在是时候看看如何把你的盒子放在正确的地方相对于视口,和彼此。我们已经涵盖了必要的先决条件,因此我们现在可以深入到CSS布局,查看不同的显示设置,包括浮动和定位的传统布局方法,以及像flexbox这样的新流行的布局工具。

适用于:

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

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

提示: 如果你在一台电脑/平板电脑/其他设备上工作,而你没有能力创建自己的文件,你可以尝试(大部分)在线编码程序中的代码示例,如  JSBin 或 Thimble 。

指南

这些文章将提供在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应用程序的控件,无论它们滚动到哪里。

还可以参阅

文档标签和贡献者

 最后编辑者: keifergu,