CSS 教学

自从 CSS 成为我们真正可以使用的工具以来，我就一直在作为一名 Web 开发人员使用它。我的第一个网站是用<font>标签和<table>用于布局构建的。我记得有人争论说整个 CSS 东西是否是一个好主意。我很快就被说服了，主要是因为能够轻松地在一个地方更改整个网站的字体。在大多数网站仅仅是一堆 HTML 页面，没有内容管理或任何形式的模板化的时候，管理通用样式非常有用。尽管当时人们一直在问“但是 Netscape 4 呢？”，但我还是 CSS 而不是表格用于布局的早期采用者。

CSS 是一种非凡的语言。那些早期的网站是在一个时代开发的，当时我们标准倡导者所能期望的最佳情况是浏览器支持现有的 CSS；开发人员会验证他们的 HTML 和 CSS 并使用现有的 CSS。然而，一个那时构建的仍然在线的网站，或者通过 Wayback Machine 访问的网站，仍然可以在现代浏览器中工作。这就是 CSS 工作组以及其他致力于为 Web 平台添加功能的团队所采取的谨慎措施，以避免破坏 Web。

我教授 CSS 的时间几乎与我使用 CSS 的时间一样长。我无法思考而不将其转化为文字。我写下东西是为了记住它们，我写下东西是为了帮助自己理解它们。这让我写了很多文字，从我职业生涯的早期开始，我就想到它们可能对其他人有用，因此我开始发表它们。多年来，我学会了如何教人们，发现了似乎可以帮助不同学习和处理信息方式的人们理解各种概念的东西。从 CSS 布局的早期开始，我们就沿着以下思路进行教学。

• 这是一个块级元素
• 这是一个内联元素
• 您可以使用display属性将块级元素转换为内联元素，反之亦然。
• 这是盒子模型，它非常重要，而且有点奇怪。

通常，我们会通过直接开始，设置布局样式并解释允许我们进行布局的各种奇怪的技巧来教授 CSS。与其他语言不同，我们可能从编程的核心基础开始，在 CSS 中，除了构建事物并在实际布局的上下文中解释奇怪之处之外，我们几乎没有其他概念可以教授。盒子模型很重要，因为它是我们真正拥有的所有布局相关内容。它是我们赋予事物大小并在一定程度上推动它们，以便使其与其他精心大小的事物对齐以创建看起来像网格的东西的核心方法。如果您不理解标准盒子模型，以及您设置的宽度实际上并不是该事物占据的宽度，那么您精心计算的百分比将加起来超过 100%，并且会发生不好的事情。

在过去的几年里，我们得到了所有这些新工具，Flexbox 和 Grid 为我们提供了一个为 CSS 设计的布局系统。然而，也许不那么明显的是，一组概念正在出现，它们为我们第一次提供了一种真正的方法来解释 CSS 布局。语言进行了一些重构，将其从一系列技巧转变为可以作为一个连贯的系统进行教授的东西。我们可以从普通流开始，然后转到更改display值的原因，因为所有新的布局功能都存在于此。我们可以分享display如何控制两件事——block和inline的外部值以及内部格式化上下文——可能是网格、flex 或普通流。

尽早解释书写模式至关重要。不是因为我们的初学者需要格式化垂直脚本，甚至不需要立即创造性地使用垂直书写。它之所以重要，是因为书写模式解释了为什么我们谈论开始和结束，以及块级和内联尺寸，而不是他们屏幕的物理顶部、右侧、底部和左侧角。理解这些内容使得更容易理解网格和 flexbox 中的对齐方式以及网格中基于行的定位。然后，盒子模型可以退回到对width和height（或inline-size和block-size）与content-box相关的事实进行简要说明，并且我们可以使用box-sizing属性将其更改为与border-box相关。在一个我们不给事物大小并推动它们的世界里，盒子模型仅仅成为我们关于盒子大小的讨论的一部分，其中包括在使用 flexbox 和 grid 时更有用的内在大小。

最后，我们需要关注条件 CSS的概念。媒体查询和特性查询意味着我们可以使用诸如视口大小、他们是否使用指向设备或触摸屏以及浏览器功能等指标来测试用户的环境。我们永远无法确定我们的网站将如何被访问，但我们越来越能够在 CSS 中优化访问环境。我们可以赋予 Web 开发人员初学者最重要的技能之一是对这一真理的理解。访问您网站的人可能拥有触摸屏，他们可能使用屏幕阅读器，他们可能使用小屏幕设备，他们也可能使用 IE11。在所有这些情况下，您都希望做一些在他们的情况下无法工作的事情，您的工作是处理它，而 CSS 已为您提供了这样做的工具。

当我开始我的 CSS 布局之旅时，背景中是人们抱怨 Netscape 4 的声音，现在我继续面对人们抱怨 IE11 的声音。随着我们行业的成长，我希望看到我们抛弃这些抱怨。我认为这始于我们教授 CSS 作为一种强大的语言，一种旨在让我们能够通过不断变化的设备的海洋向多个环境、许多不同的人展示信息的语言。