CSS layout

至此,我们已经研究了CSS基础知识,如何设置文本样式以及如何设置和操作内容所在的框. 现在是时候看看如何将框相对于视口放置在正确的位置,以及如何相互放置. 我们已经介绍了必要的先决条件,因此我们现在可以深入了解CSS布局,研究不同的显示设置,诸如Flexbox,CSS网格和定位之类的现代布局工具,以及您可能仍想了解的一些传统技术.

Prerequisites

在开始本模块之前,您应该已经:

  1. 基本了解HTML,如HTML简介模块中所述.
  2. 熟悉CSS基础,如CSS简介中所述 .
  3. 了解框样式 .

注意 :如果您在无法创建自己的文件的计算机/平板电脑/其他设备上工作,则可以尝试(大多数)在线编码程序中的代码示例,例如JSBinGlitch .

Guides

这些文章将提供有关CSS中可用的基本布局工具和技术的说明. 在课程的最后,您将进行评估,以帮助您通过布置网页来检查对布局方法的理解.

Introduction to CSS layout
本文将回顾我们在先前的模块中已经涉及的一些CSS布局功能,例如不同的display值,并介绍了我们将在本模块中介绍的一些概念.
Normal flow
网页上的元素会按照正常的流程进行布局-直到我们做出一些更改为止. 本文介绍了正常流量的基础知识,以此作为学习如何更改流量的基础.
Flexbox
Flexbox是一种用于按行或列布局项目的一维布局方法. 物品可以弯曲以填充额外的空间,并收缩以适合较小的空间. 本文介绍了所有基础知识. 学习本指南后,您可以测试您的flexbox技能,在继续学习之前检查您的理解.
Grids
CSS Grid Layout是Web的二维布局系统. 它使您可以按行和列对内容进行布局,并具有许多功能,可轻松构建复杂的布局. 本文将为您提供开始布局页面所需的全部知识,然后在继续之前测试您的网格技能 .
Floats
最初, float属性最初是用于在文本块内浮动图像,它是在网页上创建多列布局的最常用工具之一. 如本文所述,随着Flexbox和Grid的出现,它现在已恢复其原始用途.
Positioning
定位使您可以将元素从常规文档布局流程中移出,并使它们的行为有所不同,例如,一个元素相互叠放,或始终保留在浏览器视口中的同一位置. 本文介绍了不同的position值,以及如何使用它们.
Multiple-column layout
多列布局规范为您提供了一种将内容按列排列的方法,就像您在报纸上看到的那样. 本文介绍了如何使用此功能.
Responsive design
随着启用Web的设备上出现越来越多的屏幕尺寸,响应式Web设计(RWD)的概念也出现了:一组允许Web页面更改其布局和外观以适应不同的屏幕宽度,分辨率等的做法.这个想法改变了我们为多设备网络设计的方式,在本文中,我们将帮助您了解掌握该网络所需的主要技术.
Beginner's guide to media queries
CSS Media Query提供了一种仅在浏览器和设备环境与您指定的规则匹配的情况下应用CSS的方法,例如"视口宽于480像素". 媒体查询是响应式网页设计的关键部分,因为它允许您根据视口的大小来创建不同的布局,但是它们也可以用于检测有关您的网站所运行的环境的其他信息,例如用户正在使用触摸屏而不是鼠标. 在本课程中,您将首先学习媒体查询中使用的语法,然后在一个工作示例中继续使用它们,该示例显示了如何使简单的设计响应.
Legacy layout methods
网格系统是CSS布局中非常常用的功能,在CSS网格布局之前,它们往往是使用浮点数或其他布局功能来实现的. 您可以将布局想象为一定数量的列(例如4、6或12),然后将内容列放入这些假想的列中. 在本文中,我们将探讨这些旧方法的工作方式,以便您了解在旧项目中工作时如何使用它们.
Supporting older browsers

在本模块中,我们建议使用Flexbox和Grid作为设计的主要布局方法. 但是,您网站的访问者会使用较旧的浏览器,或者不支持您使用的方法的浏览器. 网络上总是如此-随着新功能的开发,不同的浏览器将对不同的事物进行优先级排序. 本文介绍了如何使用现代Web技术,而又不会锁定使用旧技术的用户.

Assessment: Fundamental layout comprehension
通过布置网页来评估您对不同布局方法知识的评估.

See also

Practical positioning examples
本文介绍了如何构建一些真实的示例,以说明您可以使用定位执行哪些操作.