派迪科技做网站技术之-如何学习CSS？

我有很多人要求我向他们推荐CSS各个部分的教程，或者问如何学习CSS。我还看到很多人对CSS的某些部分感到困惑，部分原因是关于该语言的想法过时。鉴于最近几年CSS发生了相当大的变化，这是一个非常不错的时间来刷新您的知识。即使CSS只是您所做工作的一小部分（因为您在堆栈中的其他地方工作），CSS还是最终看起来像您希望在屏幕上显示的样子，因此值得进行最新更新。

因此，本文旨在概述CSS的关键基础知识和资源，以进一步阅读现代CSS开发的关键领域。其中很多东西都在Smashing Magazine上，但是我还选择了其他一些资源，并且在CSS的关键领域也有很多人关注。它不是完整的初学者指南，也不打算涵盖所有内容。我的目标是涵盖一些关键领域，以涵盖现代CSS的广度，这将有助于为您解锁其余语言。

语言基础

对于大多数CSS，您不必担心学习内在属性和值。您可以在需要时查询它们。但是，该语言有一些关键基础，如果没有这些基础，您将很难理解它。确实值得花一些时间来确保您了解这些事情，因为从长远来看，它将节省大量时间和挫败感。

选择器，不仅仅是类

选择器按照其提示进行操作，它选择了文档的某些部分，以便可以对其应用CSS规则。尽管大多数人都熟悉使用类或body直接对HTML元素进行样式设置，但是有许多更高级的选择器可以根据元素在文档中的位置来选择元素，也许是因为它们直接位于元素之后，或者是表中的奇数行。

属于Level 3规范的选择器（您可能听说过它们称为Level 3选择器）具有出色的浏览器支持。有关可使用的各种选择器的详细信息，请参见《 MDN参考》。

一些选择器的作用就像您将类应用于文档中的某些内容一样。例如，p:first-child行为就像您将类添加到第一个p元素一样，这些被称为伪类选择器。所述伪元素选择器充当如果一个元素被动态插入的，例如::first-line以类似的方式给你包装一作用span围绕文本的第一行。但是，如果该行的长度发生更改，它将重新应用，如果插入该元素，则不会发生这种情况。这些选择器会使您变得相当复杂。在下面的CodePen中是一个与伪类链接的伪元素的示例。我们p以:first-childpsuedo类定位第一个元素，然后::first-line 选择器选择该元素的第一行，就像在第一行周围添加跨度以使其变粗并更改颜色一样。

继承与级联

级联定义了将多个规则应用于一个元素时哪个规则获胜。如果您曾经遇到无法理解为什么某些CSS似乎没有应用的情况，那么级联很可能会绊倒您。级联与继承紧密相关，后者定义了哪些属性由应用它们的元素的子元素继承。它也与特异性相关；不同的选择器具有不同的特异性，当有多个选择器可以应用于一个元素时，该选择器控制哪个获胜。

注意：要了解所有这些内容，建议您阅读《 MDN CSS简介》中的“层叠和继承”。

如果您正在努力地将一些CSS应用于元素，那么您的浏览器DevTools是最好的起点，请看下面的示例，在该示例中，我h1将元素选择器作为目标元素h1，并将标题变为橙色。我也在使用一个类，将其设置h1为rebeccapurple。该类更具体，因此h1为紫色。在DevTools中，您可以看到元素选择器被划掉了，因为它不适用。一旦看到浏览器正在获取您的CSS（但是其他原因否决了它），则可以开始找出原因。

盒子模型

CSS都是关于盒子的。屏幕上显示的所有内容都有一个框，“框模型”描述了框尺寸的计算方法（考虑了边距，边距和边框）。标准CSS Box Model会采用您给定元素的宽度，然后在该宽度上添加填充和边框-这意味着元素所占用的空间大于您给定的宽度。

最近，我们已经能够选择使用备用框模型，该模型使用元素上的给定宽度作为屏幕上可见元素的宽度。任何填充或边框都会从边缘插入框的内容。对于许多布局，这更有意义。

在下面的演示中，我有两个框。两者的宽度均为200像素，边框为5像素，填充为20像素。第一个盒子使用标准盒子模型，因此占用了250个像素的总宽度。第二个使用备用框模型，因此实际上是200像素宽。

注意：在IE6之前，Internet Explorer使用备用Box Model，其中填充和边框使内容偏离给定宽度。所以有一段时间，浏览器使用了不同的Box型号！当今天因互操作性问题而感到沮丧时，很高兴事情已经有所改善，因此我们不会与浏览器以不同方式计算事物的宽度。

CSS技巧上的Box模型和Box大小都有很好的解释，此外，还介绍了在站点中全局使用替代Box模型的最佳方法。

正常流量

如果您的文档带有一些标记内容的HTML并可以在浏览器中查看，则希望该文档可读。标题和段落将以新行开始，单词显示为句子，并且它们之间只有一个空格。用于格式化的标签（例如em）不会破坏句子流。该内容以“ 正常流 ”或“块流布局”显示。内容的每个部分都被描述为“进行中”；它知道其余内容，因此不会重叠。

如果您不反对这种行为而与之合作，那么您的生活就会变得更加轻松。这是为什么从一个正确标记的HTML文档开始很有意义的原因之一，由于正常的流程和浏览器所尊重的内置样式表，您的内容从可读的地方开始。

格式化上下文

拥有内容正常流动的文档后，您可能需要更改某些内容的外观。您可以通过更改元素的格式设置上下文来实现。作为一个非常简单的示例，如果希望所有段落一起运行而不是从新行开始，则可以将p元素display: inline更改为将其从块更改为内联格式设置上下文。

格式化上下文本质上定义了外部和内部类型。外部控制元素与页面上其他元素的行为方式，内部控制子项的外观。因此，例如，当您说display: flex要将外部设置为块格式设置上下文，而将子级设置为flex格式设置上下文时。

注意：最新版本的显示规范会更改的值display以显式声明内部和外部值。因此，将来您可能会说display: block flex;（block是外部的，flex是内部的）。

display 在MDN了解更多信息。

流入或流出

CSS中的元素被描述为“流入”或“流出”。流动中的元素具有给定的空间，而其他流动中的元素则尊重该空间。如果通过浮动或放置元素使元素脱离流动，则该元素的空间将不再受到其他流动项目的尊重。

对于绝对定位的项目，这最为明显。如果提供的项目position: absolute已从流程中删除，那么您将需要确保不会出现流出元素重叠并使布局的其他部分变得不可读的情况。

您可以在MDN上了解更多有关流入和流出元素的信息。要记住的重要一点是，如果您将某个元素从流程中删除，则您需要自己进行重叠管理，因为常规的块流程布局规则不再适用。

布局

十五年来，我们一直在使用CSS进行布局，而没有为工作布局系统设计的布局。这已经改变了。现在，我们有了功能完善的布局系统，其中包括Grid和Flexbox，还包括多列布局以及用于其实际用途的较旧的布局方法。如果您不知道CSS布局，请转到MDN 学习布局教程，或在Smashing Magazine上阅读我的文章CSS布局入门。

不要想象诸如grid和flexbox之类的方法会在某种程度上竞争。为了更好地使用Layout，您有时会发现最好将组件作为Flex组件，有时将其作为Grid。有时，您将需要multicol的列流动行为。所有这些都是有效的选择。如果您感觉自己正在与某种行为方式作斗争，那通常就是一个很好的信号，表明可能值得退后一步，尝试另一种方法。我们已经习惯了使用CSS进行修改以使其达到我们想要的效果，以至于我们可能会忘记我们还有很多其他选择可以尝试。

布局是我的主要专长领域，我在Smashing Magazine和其他地方写了许多文章来尝试帮助驯服新的Layout景观。除了上述“布局”文章之外，我还介绍了有关Flexbox的整个系列文章-从创建Flexbox Flex容器时发生的情况开始。在Grid By Example上，我有一堆CSS Grid的小例子，以及一个视频截屏教程。

此外，尤其是对于设计师而言，请查看Jen Simmons和她的Layout Land视频系列。

对准

我一般将Alignment与Layout分离开来，因为虽然我们大多数人都是作为Flexbox的一部分介绍给Alignment的，但是这些属性适用于所有布局方法，值得在这种情况下理解它们，而不是考虑“ Flexbox Alignment”或“ Flexbox Alignment” “ CSS网格对齐”。我们有一组“对齐”属性，这些属性会在可能的情况下以通用方式工作。然后，由于不同的布局方法的行为方式，它们会有一些差异。

在MDN上，您可以深入了解“ 框对齐”及其在网格，Flexbox，Multicol和“块布局”中的实现方式。在Smashing Magazine的此处，我有一篇文章专门介绍Flexbox中的对齐方式：您需要了解的有关Flexbox中对齐的一切。

浆纱

我在2018年的大部分时间里都在谈论内部和外部大小调整规范，尤其是它与Grid和Flexbox的关系。在网上，我们习惯于设置长度或百分比的大小，因为这是我们能够使用浮点数制作网格类型布局的方式。但是，如果我们允许的话，现代布局方法可以为我们做很多空间分配。了解Flexbox如何分配空间（或Grid fr单元工作）是值得您花费的时间。

在《 Smashing》杂志的这里，我写了关于布局大小调整的文章，也为Flexbox撰写了《那个柔性盒子有多大？。

响应式设计

我们新的Grid和Flexbox布局方法通常意味着，与以前的方法相比，我们可以减少媒体查询的次数，这是因为它们灵活并且可以响应视口或组件尺寸的变化，而无需更改元素的宽度。但是，在某些地方您需要添加一些断点以进一步增强设计。

以下是响应式设计的一些简单指南，对于媒体查询，通常请查看我的文章2018年使用媒体查询进行响应式设计。我看一下“媒体查询”有什么用，并展示了规范第4级中“媒体查询”的新功能。

字体和版式

与布局一起，去年网络字体的使用发生了巨大变化。使单个字体文件具有无限变化的可变字体在这里。要大致了解它们是什么以及它们如何工作，请观看Mandy Michael的精彩精彩简短演讲：可变字体和Web设计的未来。另外，我建议Jason Pamental 使用现代CSS和可变字体进行动态排版。

为了探索可变字体及其功能，Microsoft提供了一个有趣的演示，以及许多游乐场来试用可变字体-Axis Praxis是最著名的（我也喜欢Font Playground）。

一旦开始使用可变字体，那么有关MDN的指南将被证明非常有用。要了解如何为不支持可变字体的浏览器实现后备解决方案，请阅读OliverSchöndorfer的《使用后备Web字体实现可变字体》。在火狐DevTools字体编辑器还具有与可变字体工作支援。

变形和动画

我绝对需要了解CSS变换和动画。我不需要经常使用它们，并且语法似乎在两次使用之间跳了出来。值得庆幸的是，有关MDN的参考资料对我有所帮助，我建议从使用CSS变换和使用CSS动画的指南开始。Zell Liew也有一篇不错的文章，为CSS过渡提供了很好的解释。

要发现可能发生的事情，请访问Animista网站。

对于动画可能造成困惑的事情之一是采用哪种方法。除了CSS支持的功能外，您可能还需要使用JavaScript，SVG或Web动画API，并且这些东西往往会融合在一起。瓦尔·海德（Val Head）在演讲中选择了“在一个活动分开录制”中的“选择您的动画冒险”。

使用备忘单作为提醒而非学习工具

当我提到Grid或Flexbox资源时，我经常看到答复说，如果没有特定的备忘单，他们将无法使用 Flexbox。我没有将作弊表作为查找语法的内存助手的问题，并且已经发表了一些自己的文章。完全依赖那些语法的问题是，您可能会错过复制语法时事情为什么起作用的原因。然后，当您遇到该属性似乎表现不同的情况时，这种明显的不一致似乎令人困惑，或者是语言的错误。

如果您发现CSS似乎在做一些非常奇怪的事情，请问为什么。创建一个简化的测试用例，以突出问题所在，请更熟悉该规范的人咨询。我被问到的许多CSS问题是因为该人认为属性的工作方式与现实中的工作方式不同。这就是为什么我经常谈论对齐和调整大小的原因，因为这些地方经常会造成这种混乱。

是的，CSS中有些奇怪的事情。这是一种已经发展了多年的语言，在它上面有些事情我们无法更改，直到我们发明了一种时光机。但是，一旦您掌握了一些基础知识，并且理解了为什么事情会如此运作，那么在棘手的地方您就会轻松得多。