如果你知道 CSS 的工作原理，你就会更擅长 CSS

*这篇文章最初发表在我的博客上。

CSS 看起来非常简单。它给人这种印象是因为它的语法非常基础且易于理解。

向从未见过 CSS 的人展示以下代码片段，我敢打赌他们至少可以大致了解发生了什么。

.textbox {
  background: pink;
  border-width: 5px;
  border-color: red;
  border-style: solid;
}

语法过于基础的一个问题是，它给人一种简单的印象。它的书写方式很简单，但实际运作方式却非常复杂。

人们被误导，以为它很简单，然后当它不起作用时，他们就说它坏了。

即使是精通“真正的”编程语言的人也会对它感到沮丧。他们被它欺骗的程度，和那些一辈子都没写过一行代码的人一样。

尽管他们希望我们这样想，但 CSS 并没有问题。他们不知道 CSS 是如何工作的，也不会花时间去弄清楚，因为“它太基础了”。

人们不理解的常见技巧

例如，许多人会overflow: auto在父元素上使用它来阻止某些子元素使用浮动时发生的奇怪的事情。

他们知道它有效，但不知道它为什么有效。

你知道它为什么有效吗？

或者当您将 margin-top 或 padding-top 设置为百分比时会怎么样？

你可能知道 padding-top 是基于宽度而不是高度的。但你知道它不是基于元素本身的宽度吗？

再看看上面的那支笔。那里的蓝色框的宽度是 300px。调整窗口大小。padding-top 的伸缩几乎就像用 vw 设置的那样。

这并不违反直觉，你不知道它是如何运作的

你可能认为我在这里很愚蠢，但我并不是有意要刻薄。

我在课堂上教授 CSS，也在我的 YouTube 频道上为成千上万的人讲解。当我深入探讨某些主题时，人们总会回应说：“哦，原来是这样。”

有时他们已经用了好几年了。这些年来，它一直有效，但他们不知道为什么它有效。

许多新手刚开始摸索它的工作原理，然后在没有任何教程帮助的情况下尝试自己创建第一个网站，结果却惊慌失措。它不再像看起来那么简单了！

随着练习的增多，以及学会更好地规划事情，他们会变得更好。但随后，他们就会陷入自以为是的陷阱。

对于计算机科学背景的人来说也一样。这门语言给人的印象非常基础，所以它一定是这样的！

在这两种情况下，他们都没有深入研究并真正了解其工作原理。

这也意味着他们无法利用 CSS 的工作原理！我相信你一定见过一些非常棒的 CSS hack。人们不会凭空想象，而是因为他们理解 CSS 规范，所以才能想出办法。

在本文中，我们将探讨一个根据我的经验，很多人不太理解的例子。更重要的是，我还将探讨如何在未来了解其工作原理。

可以这么说，我先给你一条鱼，然后我会教你如何钓鱼。

您真的知道伪元素是如何工作的吗？

看一下这段代码。

.blockquote::before {
  content: "";
  position: absolute;
  left: -2em;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #42d7f4;
}

那个::before伪元素会存在哪里？

你知道有多少人选A吗？我一直以为是A。经常有人在我的视频评论区告诉我，他们也以为是A。直觉上，A是有道理的，因为……嗯，我们先 .blockquote说……

但这并不对。我们是在内部内容的前面.blockquote。 也同样适用于::after。它位于其父级的所有内容之后，但它位于其父级内部。

这当然是好事。否则使用起来会是一场噩梦。

知道它存在于其父级内部意味着如果我们在父级上声明一个非静态的位置，我们就可以使用position: absolute并将我们的伪元素放在我们想要的位置。

人们一直在使用伪元素，并且像我上面描述的那样使用它们，但他们认为 A 仍然是答案。

如果你选了 A，我建议你不要太频繁地使用 DevTools。去看看事情发生的原因和过程吧（我在这方面也犯了很长时间的错误）！

如何更好地理解 CSS

自从我开始教授 CSS 以来，我必须深入学习，不断提升自己的水平。这彻底改变了我思考和处理 CSS 的方式。

如果你能抽出时间来教书，那当然很棒，但我知道很多人并没有这个选择（或愿望）。没关系，还有其他方法可以解决问题。

我最大的建议就是不要过多使用 StackOverflow。

别误会，StackOverflow 真的很棒。它充满了令人惊叹的信息。能够快速找到答案真是太好了。真希望我在 90 年代末刚开始做网站的时候就有像 StackOverflow 这样的平台（是的，我年纪大了）。

问题是，如果你从那里复制粘贴解决方案，你什么也学不到。说实话，你大多数时候都是这么做的。

当我试图更好地理解某些东西时，我最依赖的资源是MDN Web 文档或实际的规范。我觉得 MDN 更容易理解，所以我从那里开始，如果有必要，我才会去研究实际的规范。

我实际上会用 Google 搜索我所寻找的内容，并将 MDN 放在末尾以确保它是第一个结果。

如果我们这样做，::before您会看到这是第一句话：

在 CSS 中，::before 创建一个伪元素，它是所选元素的第一个子元素。

它并不总是那么清晰，有时你需要深入研究他们的例子或更深入地阅读更复杂的问题，但他们以井然有序和简洁的方式将信息呈现出来，真是令人惊叹。

付诸实践

让我们将padding-top上面的例子作为一个案例研究。

假设你padding-top按照我上面的做法操作，但它并没有像你预期的那样运行。你会有点恼火。

下一步？谷歌搜索“padding-top mdn”。

原来他们有一个专门讨论padding-top的页面，而不是一些通用的“padding”页面。太棒了。

单击并向下滚动一点后，您会发现一个专门介绍可能值的部分。

其中提到了固定长度，还有百分比。这很方便。你读到了以下内容：

填充的大小（相对于包含块宽度的百分比）。必须为非负值。

这就是答案。它与包含块的宽度有关。

现在我们知道了它是如何计算的，我们就可以正确使用它（或者在这种情况下，也许使用百分比以外的单位）。

在这种情况下，这可以说是旅程的结束。

有时文档也会解释为什么会出现这种情况。但有时，比如这次，文档并没有真正解释原因。在这种情况下，它会导致页面崩溃，形成一个循环。如果你想了解更多，这篇文章很好地解释了这个问题。

你不需要对每个属性都这样做

我知道我们不可能深入研究所有 CSS 属性，否则你根本没时间写一行代码，而且我想大家都知道它的color工作原理。但是，那些使用 flexbox 却不知道 flex-basis 工作原理的人，大概占了所有 flexbox 使用者的 90%。

当您了解属性的工作方式时，您可以更有效地使用它，并编写更好的代码，使其每次都能按照您期望的方式工作。

那不是很好吗？

因此，下次您编写代码时如果出现问题，请不要直接跳到 StackOverflow 或寻找一些可以粘贴到您自己的代码中的拼凑答案并希望它能够起作用。

多花 5 到 10 分钟，弄清楚这个属性的实际用途。从长远来看，这些额外的时间将为你节省十倍的时间。

你仍然会陷入困境

最重要的是坚持不懈。你写的代码越多，你使用的工具就越多，一切就会变得越容易。但有一件事我可以保证：你仍然会时不时地遇到瓶颈。

无论你做什么，如果遇到真正让你困惑的问题，不要担心。找到一个你愿意提问的人或小组，无论是社区还是可以私信的人，这都会带来很大的帮助。

如果你没有这个选择，StackOverflow 也随时可用。正如我之前所说，它是一个非常棒的资源，我希望自己刚开始的时候就能用到它！最大的问题是，人们往往只想着解决问题，而不是首先弄清楚问题是什么。

理解问题 vs. 获取解决方案

当您在 StackOverflow（或其他任何地方）上获得解决方案时，您会非常高兴，因为您复制并粘贴一些代码并且它有效！

你刚刚用头撞墙 2 个小时，现在终于修好了，哇哦！

但你什么也没学到，因为你继续前进了。问题终究还是解决了！

真正的诀窍在于提出问题，与其寻求解决方案，不如先问问题的根源。使用高质量的问题，首先询问问题的原因，可以带来更多学习的收获。

当人们面临这样的问题时，他们也会给你解决方案，但大多数时候，他们的解决方案更加详细和有见地。

我知道它们有效，因为我一直在回答人们的问题。

如果这是一个低价值的问题，我会快速回答并继续，如果他们以正确的方式提问，我最终会提供更多价值，因为虽然我想快速回答，但我仍然想真正回答他们的问题！

你赢了两次，因为你找到了解决方案，但更重要的是，你也获得了更深的理解。这意味着下次再发生类似的事情时，你会知道为什么会发生，以及如何解决，这真是太棒了。

不确定如何提出高价值的问题？

我有一个免费的 PDF，其中深入探讨了该主题，您可以在此处获取。

它更详细地介绍了低价值和高价值问题，并给出了具体的例子，说明如何提出相同的问题，但以提取最大价值的方式。