【译】如何学习CSS

• 原文地址：How To Learn CSS
  
• 原文做者：rachel-andrew
  
• 译者：liaozeen
  

不少人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。 我也看到不少人对CSS的部份内容感到困惑，一部分缘由是因为对语言的过期认识。 鉴于CSS在过去几年中发生了至关大的变化，这是一个更新知识的好时机。 即便CSS只是你所作工做的一小部分（由于你使用其余技术栈），CSS是你最终但愿在屏幕上显示的结果，因此值得合理去学习。

所以，本文旨在概述CSS的关键基础和资源，以便进一步阅读现代CSS开发的关键领域。 其中许多资源在Smashing杂志上已经有了，但我也选择了其余一些资源，也有人关注CSS的关键领域。 这不是一本完整的初学者指南或旨在涵盖全部知识点。 个人目标是覆盖现代CSS的广度，同时重点关注几个关键领域，将帮助你理解CSS的其余部分。

语言基础知识

对于CSS的大部份内容，你不须要特地去学习属性和值，你能够在须要时查找它们。 然而，CSS中一些基础知识没有掌握好，你将很难去理解它。 这些基础知识值得你花时间去理解，从长远看，它会帮你节省不少时间和少走弯路。

选择器，不只仅有类

选择器的表现如标题所说的，它选择文档的某些部分，以便你能够将CSS规则应用于它。 大多数人都熟悉使用 class，或在 直接使用HTML元素设置样式，好比 body，可是还有不少更高级的选择器能够根据文档中的位置选择元素，直接选择位于元素以后的元素，或选择表格中的奇数行。

这些选择器是CSS3规范的一部分（你可能据说过它们被称为第3级选择器）具备出色的浏览器支持。 有关可使用的各类选择器的详细信息，请参阅 MDN 参考。

有些选择器的行为就好像你已经将类应用于文档中的某些内容。 例如p:first-child就像你在第一个p元素中添加了一个类同样，这些被称为 伪类选择器。 伪元素选择器就像动态插入一个元素同样，例如::first-line的表现与用span  包裹第一行文本相似。 可是，若是该行的长度发生变化，它将从新应用，若是插入该元素则不会出现这种状况。 这些选择器可能会至关复杂。 在下面的CodePen中是一个用伪类连接的伪元素的例子。 咱们使用:first-child伪类定位第一个p元素，而后::first-line选择器选择该元素的第一行，就好像在第一行周围添加了一个<span>以使其变为粗体和改变颜色。

继承和层叠

层叠是指当元素应用了多个样式规则，哪一个规则优先应用。 若是你曾经遇到过没法理解为何某些CSS彷佛没有应用的状况，那多是层叠没有运用好。 层叠与继承紧密相关，继承定义了子元素能够继承父元素的样式属性。 它还与特异性有关，不一样的选择器具备不一样的特异性，当有几个选择器能够应用于一个元素时，继承能够决定应用哪一个规则。

注意：为了理解全部这些内容，我建议阅读MDN CSS简介中的 层叠和继承。

若是你正在尝试将一些CSS应用于一个元素，那么你的浏览器开发者工具是开始最好的地方。看看下面的例子，我用元素选择器 h1  将 h1 标题设置为橙色。同时，我也使用类选择器设置h1 设置为紫色。 因为类更具体，所以h1是紫色的。 在开发者工具中，您能够看到元素选择器被划掉，由于它没有被应用。 一旦你看到浏览器正在获取你的CSS（但其余东西已经推翻了它），那么你能够开始找出缘由。

盒模型

CSS里一切都是盒子。 屏幕上显示的全部内容都有一个框，盒模型描述了如何计算该框的大小 - 将外边距，内边距和边框考虑进去。 标准的CSS框模型接受给定元素的宽度，而后将内边框和边框添加到该宽度上——这意味着元素占用的空间大于给定的宽度。

最近，咱们已经可以选择使用IE盒模型，使得元素上的给定宽度做为屏幕上可见元素的宽度。 任何内边距或边框都会从边缘插入框的内容。 这对许多布局更有意义。

在下面的演示中，我有两个盒子。 二者的宽度均为200像素，边框为5像素，内边距为20像素。 第一个框使用标准框模型，所以占用总宽度为250像素，第二个框使用IE盒模型，所以其实是200像素宽。

浏览器开发者工具能够再次帮助你了解正在使用的盒子模型。 在下图中，我使用火狐浏览器的开发者工具使用默认的内容框框模型检查框。 工具告诉我这是正在使用的盒模型，我能够看到大小以及如何将边框和内边框添加到指定的宽度。

注意：在IE6以前，Internet Explorer使用IE盒模型，内边框和边框插入给定宽度的内容里。 因此有一段时间浏览器使用不一样的盒模型！ 若是今天的互操做性问题感到沮丧，如今已经有所改善，那么咱们就不会处理浏览器以不一样的方式计算元素的宽度。

在 CSS Tricks 里，有关于盒模型和盒子尺寸的很好的解释，并解释了在你的网站中全局使用IE盒模型的最佳方法。

标准流

若是你的文档内容用一些HTML标记，你的文档将具备可读性。标题和段落会另起新的一行，单词组成句子时，它们之间有一个空格。标记是用来格式化的，像 em 不会破坏句子的流。 句子会表现标准流，或块流布局。句子的每一个部分都被描述为“在流中”，它知道句子其他内容，因此不会重叠。

若是你去了解，而不是去反对这种行为，你会变得更加轻松。这是为何从正确标记的HTML文档开始颇有意义的缘由之一，因为浏览器遵照正常流和内置样式表，你的内容从可读的地方开始。

格式化上下文

一旦文档的内容处于正常流程中，您可能但愿更改其中一些内容的外观。 你能够经过更改元素的格式上下文来完成此操做。 举个一个很是简单的示例，若是你但愿全部段落连在一块儿而不是重新行开始，你能够设置 p 元素的样式属性 display:inline ，将 p 元素由块级元素变成内联元素。

本质上，格式化上下文定义了外部和内部类型。外部控制元素与页面上其余元素的行为，内部控制子元素的外观。例如，当你设置 display:flex ，你在设置外部为块格式化上下文，设置子元素为 flex 格式化上下文。

注意：最新版本的Display规范改变了 display 的值，显式声明外部和内部的类型。所以，将你可能会声明 display:block flex;  （外部为 block，内部为 flex）

在 MDN 上阅读更多关于 display的信息

进入或离开流

CSS中的元素被描述为“在流中”或“脱离流”。流中的元素被赋予空间，而且空间被流中的其余元素所影响。 若是经过浮动或定位元素使元素脱离流，则该元素的空间将再也不受到其余流元素的影响。

对于绝对定位的元素，是最明显的。 若是你设置一个元素 position: absolute  ，该元素会从流中脱离，你须要确保这个元素不会与流中的元素重叠，且不影响你布局的其余部分的可读性。

然而，浮动元素也会从流中脱离，但后面的元素的文本将环绕该浮动元素。你能够设置后面元素的背景颜色，你会看到他们会上升并占用了原来浮动元素原来的空间。

你能够在MDN上阅读更多有关 流中和脱离流 的信息。 须要记住的重要一点是，若是从流中取出一个元素，则须要本身管理重叠，由于块流布局的常规规则再也不适用。

布局

十五年来，咱们一直使用CSS布局，但没有设计一套布局系统。这已经改变了。 咱们如今拥有功能完备的布局系统，其中包括 Grid 和 Flexbox ，还有多列布局和旧布局方法也应用于实际目的。若是你想对CSS布局还不熟悉，你能够阅读 MDN 上的布局教程，或阅读我发表在Smashing杂志上的文章 《开始学习CSS布局》。

不要认为grid和flexbox等方法在某种程度上是竞争的。为了更好地使用布局，你有时会发现组件最好做为 flex ，有时做为 Grid。有时，你想要多列流动布局。全部这些都是不错的选择。若是你以为本身在与某些事物的行为方式做斗争，这一般是一个很是好的迹象，代表它可能值得退一步，尝试一种不一样的方法。咱们已经习惯了在CSS上作一些咱们想作的事情，以致于咱们可能会忘记咱们还有不少其余的选择能够尝试。

布局是个人主要专业领域，我在Smashing Magazine和其余地方写了不少文章，试图开拓新的布局美化。 除了上面提到的布局文章，我在Flexbox上有一整套系列 - 《从建立Flex 容器时，发生了什么》。 在 Grid示例 上，我列出不少CSS Grid 的例子 — 以及一个视频教程。

此外 - 特别是对于设计师 - 查看 Jen Simmons 和她的《Layout Land》视频系列。

对齐

一般，我会将对齐和布局分开，虽然大多数人把对齐看成 Flexbox的一部分。对齐这些属性适用于全部布局方法上，应该在上下文去理解对齐，而不是考虑 “Flexbox对齐”或“CSSGrid 对齐”。对齐属性在大致上表现同样，但不一样布局方式里会有一些差别。

在MDN上，您能够深刻了解 盒对齐 及其在Grid，Flexbox，多列和块布局中的实现方式。 在Smashing Magazine上，我有一篇文章专门介绍Flexbox中的对齐方式：你须要知道的有关Flexbox中对齐的全部内容。

尺寸

我在2018年花了不少时间讨论了内部和外部尺寸规范，特别是它与Grid和Flexbox的关系。在web上，咱们习惯于设置尺寸为长度或百分比，这就是咱们如何使用浮动来制做网格类型布局的方法。然而，现代的布局方法能够为咱们作不少空间分配——若是咱们容许的话。值得花时间去了解Flexbox如何分配空间(或Grid  fr 单元如何工做)。  

在Smashing Magazine上，我写了一些关于 布局中的尺寸 的文章，也写了一些关于Flexbox的文章，好比 Flex 盒子有多大?

响应式设计

一般，新的Grid和Flexbox布局方法意味着咱们可使用比旧方法更少的媒体查询，由于它们很是灵活，能够响应视口或组件大小的变化，而无需咱们更改元素的宽度。 可是，有些地方须要添加一些断点来进一步加强设计。

如下是响应式设计的一些简单指南，通常状况下，对于媒体查询，请查看个人文章《在2018年使用媒体查询进行响应式设计》。我将查看媒体查询的用途，并介绍规范4的媒体查询的新功能。

字体和排版

与布局同样，网络上的字体使用在去年发生了巨大的变化。如今，可变字体，使单个字体文件具备无限的变化。 要了解它们是什么以及它们如何工做，请观看Mandy Michael的精彩简短演讲：可变字体和网页设计的将来。 另外，我会推荐Jason Pamental的动态排版与现代CSS和可变字体。

为了探索可变字体和它们的功能，微软提供了一个有趣的演示，以及一些尝试可变字体的游乐场 - Axis Praxis是最知名的（我也喜欢字体游乐场）。

MDN上的指南将证实一开始使用可变字体是很是有用的。要了解如何为不支持可变字体的浏览器实现回退解决方案，请阅读Oliver Schondorfer的《使用回退Web字体实现可变字体》Firefox DevTools字体编辑器还支持使用可变字体。

变形和动画

CSS转换和动画绝对是我须要知道的基础。 我不常常须要使用它们，在使用时会忘记语法。 值得庆幸的是，MDN上的参考资料帮助了我，我建议从使用CSS变换和使用CSS动画的指南开始。 Zell Liew也有一篇很好的文章，为CSS过渡提供了很好的解释。

要发现一些可能的事情，请查看Animista网站。

关于动画可能使人困惑的事情之一是采起哪一种方法。 除了CSS支持的内容以外，你可能还须要涉及JavaScript，SVG或Web Animation API，而这些事情每每都会被混为一谈。 在她的演讲中，选择你的动画冒险记录在事件中，Val Head解释了这些选项。

使用速查表做为回忆，而不是学习工具

当我提到Grid或Flexbox资源时，我常常看到回复说，若是没有特定的速查表，他们就不能使用Flexbox。我以为把速查表做为记忆助手查找语法没有问题，我本身也出版过一些速查表。彻底依赖速查表的问题是当你复制语法时，你可能会忽略为何要这样写。而后，当你遇到属性的行为彷佛不一样的状况时，这种明显的不一致性彷佛使人困惑，或者是语言的错误  。

若是你发现CSS在作一些很是奇怪的事情的状况下，问问为何。建立一个简单的测试用例来强调这个问题，问问对规范更熟悉的人。我被问到的许多CSS问题都是由于人们认为属性的表现与它在现实中的表现不一样。这就是为何我常常讨论关于对齐和尺寸，由于这些地方常常会混淆。

是的，CSS中有一些奇怪的东西。它是一门通过多年进化的语言，有些东西咱们没法改变，除非咱们发明了时间机器。然而，一旦你掌握了一些基础知识，而且理解了为何会这样，你就能够更轻松地处理棘手的问题。