[译] 如何学习 CSS

• 原文地址：How To Learn CSS
• 原文做者：Rachel Andrew
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Mcskiller
• 校对者：Reaper622, Qiuk17

摘要：你不须要强行记住每个 CSS 属性和值，有不少地方能够方便你快速去查阅。可是记住一些基础的知识点会让你使用起来更加驾轻就熟。本文旨在引导你如何学习 CSS。

我遇到不少人叫我给他们推荐 CSS 各个知识点的教程，或者问我应该怎么学习 CSS。我也看到不少人对 CSS 的部份内容感到困惑，一部分缘由是由于他们对语言的过期认知。鉴于 CSS 在过去的几年间改变了不少，也是时候来更新你掌握的知识了。即使 CSS 只占你所作工做的一小部分（由于你在栈的别处工做），CSS 就像你想他们最终在屏幕上看到的那样，因此值得合理更新。

所以，本文旨在概述 CSS 的要点以及提供一些资源，以进一步学习现代 CSS 开发的主要内容。其中许多都是 Smashing Magazine 上的东西，但我也提供了其余的一些资源，其中包括人们关注的 CSS 要点。这不是一个完整的初学者指南或者绝对涵盖全部知识点的文章。个人目标是以几个重要知识点展现现代 CSS 的广度，这将有助于你学习其余语言。

语言基础知识

对于 CSS 的大部份内容，你不须要担忧学习属性和值。你能够在须要时查找它们。然而，学习 CSS 须要一些关键的基础知识，若是没有这些基础，你会很难去理解它。因此它真的值得你去花时间理解，从长远来看，它将会为你的学习带来诸多便利。

选择器，不只仅是 Class

选择器顾名思义，它 选择 文档的某些部分，以便你能够将 CSS 应用到上面。虽然大多数人都熟悉使用 Class，或者直接设置诸如 body 之类的 HTML 元素，可是这里还有大量更高级的选择器能够根据文档中的位置来选择元素，多是由于它们在某些元素的后边，也多是表格中的奇数行。

Level 3 规范中的选择器（你也许听过它们被称为 Level 3 选择器）具备 优秀的浏览器兼容性。更多有关使用各类选择器的详细信息，请参考 MDN Reference。

一些选择器的效果就像你在文档中运用 class 选择器同样。例如，p:first-child 就像你在第一个 p 元素中添加了一个 class 同样，这些被称为 伪类 选择器。伪元素 选择器就好像一个元素是动态插入的，例如 ::first-line 的做用方式就相似于在第一行文本周围包裹 span。可是，若是这一行的长度发生了变化，它将会从新应用，若是插入该元素则不会出现这种状况。这些选择器可能会很是复杂，在下面的 CodePen 中是一个伪元素用伪类连接的例子。咱们使用 :first-child 伪类定位第一个 p 元素，而后使用 ::first-line 选择器选择该元素的第一行，就好像在第一行的周围添加了一个 span 让它变粗并改变颜色。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上编写的例子 —— 第一行。

继承和层叠

当有许多规则应用于一个元素上时，层叠决定了到底按哪个规则执行。若是你曾经没法理解一些 CSS 样式为何没有被应用，那多是由于你没有理解层叠的概念。层叠与继承密切相关，它定义了哪些属性是应该被子元素继承的。它也和优先级有关：不一样的选择器有不一样的优先级，当有多个选择器能够应用到同一个元素上时，优先级决定了哪个可以被成功应用。

提示：要是想了解所有内容，推荐去看看 MDN 的 CSS 简介中的 层叠和继承。

若是你正努力将一些 CSS 样式应用到一个元素上，那么使用浏览器的开发者工具是最佳方法，看看下面的例子，其中有一个 h1 元素由 h1 选择器选择并将标题设置为橙色。我还使用了一个 class 设置 h1 颜色为 rebeccapurple。这个 class 优先级更高，因此 h1 是紫色的。在开发者工具中，你能够看见元素选择器被划掉，由于它并无被应用。因此如今一旦你看见浏览器开始应用你的 CSS（但其余东西阻止了它致使没有正常显示），你就能够找到缘由了。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上编写的例子 —— 优先级。

开发者工具能够帮助你查看为何有些 CSS 样式没有成功应用到元素上（查看原图）

盒模型

CSS 都是关于盒子的。每一个显示在屏幕上的东西都有一个框，盒模型描述了如何计算出框的大小 —— 考虑 margin，padding，和 border。标准的 CSS 盒模型使用给定的元素宽度，而后在该宽度加上 padding 和 border 的宽度 —— 也就是说元素占据的空间比你设定的宽度要大。

最近，咱们已经能够选择使用 border-box 盒模型，该模型使用元素上给定的宽度做为屏幕上可见元素的宽度。任何 padding 或者 border 上的设置都将从边缘向内进行设置。这让许多布局更加便利。

在下面的 Demo 中有两个盒子。它们的宽度都是 200px，其中 border 是 5px，padding 是 20px。第一个盒子使用的是基础盒模型，因此整体宽度是 250px。第二个盒子使用的是 border-box 盒模型，因此实际宽度就是 200px。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上编写的例子 —— 盒模型。

浏览器的开发者工具可以再一次帮助你了解你正在使用的盒模型。下面的图片中，我使用 Firefox 的开发者工具去检查默认的 content-box 盒模型。开发者工具告诉我这是一个正在使用的盒模型而后我可以看见它的大小和我设定的 border 和 padding 是怎样添加到宽度上的。

开发者工具帮助你了解盒子为什么具备特定尺寸，以及你正在使用的盒模型（查看原图）

提示：在 IE6 以前，Internet Explorer 默认使用 border-box 盒模型，padding 和 border 让内容偏离了给定的宽度。因此在那段时间许多浏览器都在使用不一样的盒模型！不过如今你没必要为了浏览器之间的互通所担忧，事情已经有所改善，咱们已经不须要由于浏览器的不一样而使用不一样方法计算宽度。

在 CSS Tricks 上有一篇很好的对于 盒模型及其大小 的解释，以及在你的站点中 全局使用 border-box 盒模型 的最佳方法。

常规流

若是你的文档由一些 HTML 标签组成而后你在浏览器中打开它，它应该是有可读性的。标题和段落会从一个新行开始，单词中间由空格隔开组成句子。用于格式化的标签，就像 em，不会破坏一句话的流。这些内容都以 常规流布局 或者说块状流布局展现。每一部份内容都处于“流”中；每个元素都会依次排放，不会重叠在一块儿。

若是你合理运用这种特性的话，你的工做将会变得更加轻松。这也是为何 从正确标记的 HTML 文档开始 有道理的缘由之一，因为常规流和内置样式表被浏览器所遵照，你的内容会从可读的地方开始。

格式化上下文

一旦你有了一个使用常规流布局的文档，你也许会想改变某些内容的外观。那么你能够经过修改元素的格式化上下文来进行改变。举一个简单的例子，若是你想全部段落都连在一块儿而不是每一段都新建一行，你能够将 p 元素设定为 display: inline 将其从块更改成行内格式化上下文。

格式化上下文基本上定义了容器外部和内部类型。外部控制元素与页面上其余元素的共同表现，内部控制子元素的外观。打个比方，当你设定 display: flex 时，你设定外部为块级格式化上下文，而且子元素为 flex 格式化上下文。

提示：最新版本的 Display 规范更改 display 来显式的声明内部和外部值。所以，之后你可能会用到 display: block flex;（block 是外部的，flex 是内部的）。

在 MDN 上阅读更多有关 display 的内容。

进入或脱离常规流

CSS 中的元素能够被分为，“在流中”或者“脱离流”。流中的元素被赋予了不被其余元素干扰的独立空间。若是你经过调整浮动或者定位让一个元素脱离流，那么它的空间可能会被其余在流中的元素占用。

对于使用绝对定位的元素，这是最明显的。若是你设定一个元素 position: absolute 那它就脱离流了，而后你须要去保证脱离流的元素没有和流中的元素重叠，否则你的布局可能会变得难以理解。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上编写的例子 —— 脱离流：绝对定位。

然而，浮动元素也会脱离流，而后后续的内容将会围绕浮动元素的盒边线布局，你能够经过在后面元素的盒中设置背景颜色来看到它们已经提高位置而且忽略了以前的浮动元素的空间。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上编写的例子 —— 脱离流：浮动。

你能够在 MDN 上阅读更多关于 在流中和脱离流的元素 的内容。要记住的重要一点是，若是你让一个元素脱离流，你须要本身去管理元素是否重叠，由于块级流布局再也不适用。

布局

十五年来，咱们一直在 CSS 中进行布局而没有一个专门设计的布局系统。如今这一切已经发生了改变。咱们如今拥有了一个功能完善的布局系统包括 Grid 和 Flexbox，还有多列布局和用于实际目的的旧布局方案。若是你还不理解 CSS 布局，请移步 MDN 学习布局 或者在 Smashing Magazine 查阅个人文章 从零开始的 CSS 布局。

不要觉得像 grid 和 flexbox 这样的方法在某种程度上来讲是竞争关系。为了更好的布局，你可能会发现有时候适合使用 flex 组件有时候又适合使用 grid。有时，你也会想要使用多列布局。全部这些都只是你的可选项。若是你感受一种布局不太合适，一般状况下这是一个好现象，说明你应该去试试其余不一样的布局方案。咱们习惯于“矫正” CSS 样式来达到想要的效果，而致使咱们忘记了原本就有的那些可选项。

布局是个人主要专业领域，我在 Smashing Magazine 和其余地方写了不少文章来帮助掌握新的布局。除了上面我提到的布局文章，我还有一个 Flexbox 系列文章 —— 从 当你在建立一个 Flexbox 伸缩容器时会发生什么 开始。在 Grid by Example 上，我有一大堆 CSS Grid 的小例子 —— 以及一个视频教程。

此外 —— 特别是设计师们 —— 请查看 Jen Simmons 和她的 Layout Land 系列视频。

对齐

我通常把对齐和布局分开，不过咱们大多数人都是把对齐做为 Flexbox 的一部分来看的，其实这些属性能够应用到任何一个布局方法上，认真学习如下部分比思考用“Flexbox 对齐”或者或者"CSS Grid 对齐"要好得多。咱们有一组对齐属性能够在平常中使用；不过因为不一样的布局它们的效果可能会有些许不一样。

在 MDN 上，你能够深刻研究 盒对齐 以及它是如何在 Grid（网格布局），Flexbox（弹性布局），Multicol（多行布局）和 Block 布局（块布局）中实现的。在 Smashing Magazine 上，我有一篇专门介绍 Flexbox 对齐的文章：Flexbox 中有关对齐你须要知道的一切。

尺寸

我在 2018 年中的大部分时间都在谈论内部和外部尺寸规范，以及它与 Grid 和 Flexbox 的关系。在 Web 开发中，咱们习惯于使用固定长度或者百分比来设置尺寸，由于这是咱们可以作到的使用数值完成的网格类布局。可是，现代布局方式能帮咱们完成不少空间操做 —— 只要咱们让它们这么作。理解 Flexbox 如何分配空间（或者 Grid 的 fr 单位是如何工做）是颇有必要的。

在 Smashing Magazine 中，我写了几篇文章，关于 布局中的尺寸 以及适用于 Flexbox 的 那个弹性盒子有多大？

响应式设计

咱们的新布局方法 Grid 和 Flexbox 与咱们老的布局方法相比，会使用更少的媒体查询，由于它们是灵活的，不须要咱们去修改元素的宽度，它们会根据视图或者组件大小进行自适应。可是你可能会但愿在某些地方添加断点来加强你的设计。

这里是一些简单的 响应式设计 指南，查看个人文章 在 2018 年使用媒体查询来进行响应式设计。我介绍了一下媒体查询的许多用法，以及一些将来在 Level 4 中会出现的新媒体查询功能。

字体和排版

和布局同样，网络上关于字体的使用在去年也发生了巨大的变化。可变的字体在这里让单个字体文件能够产生无数种变体。想了解它们是什么以及它们的工做方式，请查看 Mandy Michael 的精彩讲解：可变字体和 web 设计的将来。另外，我还推荐去看看 Jason Pamental 的 动态排版与现代 CSS 和可变字体。

想要探索可变字体和它们的功能，能够去看看 来自微软的一个有趣的演示 提供了许多案例来尝试可变字体 —— Axis Praxis 就是一个知名的例子（我还喜欢 Font Playground）。

当你开始使用可变字体时，这篇 MDN 上的指南 能够给你一些帮助。以及阅读 Oliver Schöndorfer 的 使用备选 Web 字体实现可变字体 学习如何给不支持可变字体的浏览器返回解决方案。Firefox 开发者工具字体编辑器 也支持可变字体。

变形和动画

CSS 变形和动画绝对是咱们所须要知道的基础内容。我不常用它们，语法已经消失在了个人脑海中。不过谢天谢地，MDN 上的资料帮助了我，我也建议直接从 MDN 上的指南 使用 CSS 变形 和 使用 CSS 动画 开始。Zell Liew 也有一篇优秀的文章 解释 CSS 过渡。

想发掘一些有趣的内容，请访问 Animista。

关于动画可能最使人困扰的就是应该怎么去实现。除了 CSS 的部分，你可能还须要涉及到 JavaScript，SVG，或者 Web Animation API，这些事情可能每每会被混为一谈，在 An Event Apart 录制的 选择你的动画冒险 中 Val Head 解释了这些。

使用小抄做提示，而不是学习工具

当我提到 Grid 或者 Flexbox 资源时，我常常看到有回复说它们 不能 在没有特定小抄的状况下使用 Flexbox。我不反对使用小抄来帮助记忆语法，我也分享了我本身的一些小抄。主要问题是，在你照着小抄复制代码时你极可能会忘记思考它是如何作到的。而后，当你遇到一个属性实现出了意想不到的效果时，你会感到莫名其妙甚至以为多是这个语言的问题。

若是你发现本身的 CSS 在作一些奇怪的事情时，大胆的问 为何。建立一个简单的测试用例来突出显示问题，问问更加熟悉规范的人。我被问到的许多 CSS 的问题都是由于使用者坚信代码正在以不一样的方式在运行。这也是我为何要谈论对齐和尺寸，许多问题就出在这些地方。

没错，CSS 中确实有一些奇怪的问题。这是一个多年来都在不断发展的语言，有些事情咱们不能改变 —— 除非咱们有时光机。可是，一旦你掌握了这些基础知识，而后理解了其中的原理，你就能更轻松的处理这些问题。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。