此刻,我们已经看过CSS的基础知识,如何设置文本的样式,以及如何设置和操作内容所在的框。 现在是时候看看如何把你的盒子放在与视口相关的正确位置上。 我们已经涵盖了必要的先决条件,所以我们现在可以深入到CSS布局,查看不同的显示设置,涉及浮动和定位的传统布局方法,以及像flexbox这样的现代布局工具。

适用于:

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

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

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

指南

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

介绍 CSS 布局
本文将重述一些我们在之前的模块中已经涉及的CSS布局功能 - 例如不同的 display 值— 并介绍我们将在本单元中涵盖的一些概念。
  浮动
最初对于文本块中的浮动图像,float属性已经成为在网页上创建多个列布局的最常用工具之一。本文解释所有。
 定位
定位允许您从常规文档布局流程中取出元素,并使它们具有不同的行为,例如坐在另一个之上,或始终保持在浏览器视口内的同一位置。 本文解释不同的position 值,以及如何使用它们。
练习定位案例
在最后一篇文章中介绍了定位的基础知识,现在将讨论构建几个真实世界的例子,以说明你可以通过定位做什么样的事情。
弹性盒子
一种新技术,但现在在各种浏览器中支持相当广泛的支持,Flexbox开始准备好广泛使用。 Flexbox提供了工具,允许快速创建复杂,灵活的布局,以及历史上被证明难以使用CSS的功能。本文解释所有的基本原理。
网格布局
网格系统是CSS布局中使用的另一个非常常见的特征,其趋向于使用浮动或其他布局特征来实现。您可以将布局设为一定数量的列(例如4,6或12),然后将内容列放在这些虚拟列中。在本文中,我们将探讨创建网格系统的基本思想,使用网格框架提供的现成网格系统,并通过实验CSS网格 - 一个新生的新的浏览器功能,使在网上实现网格设计更容易结束。. 

评估

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

创建一个弹性盒子布局 Creating a flexible multicolumn layout
此评估测试您创建标准多列布局的能力,并具有一些有趣的功能。
创建一个固定的控制组件 Creating a fixed control widget
此评估测试您对定位的理解,要求您创建一个固定的位置控件小部件,允许用户访问Web应用程序的控件,无论它们滚动到哪里。

还可以参阅

文档标签和贡献者

 最后编辑者: yydzxz,