早在2008年，Chris 分享了他使用 CSS 时“顿悟”的时刻。你懂的，就是在你不明白 CSS 是什么东西，突然间对它如何工作有了基本理解时，脑海中闪现的那个比喻性的灯泡。
对于 Chris 来说，它是三个概念的结合
- 每个页面元素都是一个盒子
- 我可以控制这些盒子的尺寸和位置
- 我可以为这些盒子设置背景图像
有趣的是，看似如此简单的东西，可以发展成为一项决定职业生涯的技能，无论是为客户设计网站还是像这样创建博客。
回忆起任何人的“顿悟”时刻都有一种永恒的品质。自 Chris 撰写那篇文章以来，CSS-Tricks 团队 已经发展了八年，因此我们认为征求大家的意见并分享 CSS 对我们每个人来说开始变得有道理的时刻会很有趣。
Geoff Graham
当我意识到 CSS 是一个包含 HTML 文件使用的样式的文档，并且类是样式应插入位置的占位符时，CSS 开始对我来说变得有意义。
这有点类似于 Chris 的经历，但更多地是在文档级别的事情。我想知道 Web 浏览器如何仅仅根据 HTML 文档中的内容来更改页面的呈现方式，我看到的只是类似这样的东西
<div class="header">
<h1>A Headline</h1>
<h2>A clever subtitle</h2>
</div>
<div class="content">
<p>The content and all that.</p>
</div>
<div class="footer">
<p>Copyright 2006</p>
</div>我完全不明白那段标记如何能够转换为一个完整的页面设计。也就是说，直到我在文档的 <head> 中看到了链接的 CSS 文件。
<link rel="stylesheet" href="path/to/style.css" />打开那个文件让我的大脑开始转动，并促使我开始逐个元素地查看标记。我之前是将 HTML 标记作为一个整体来查看，现在我开始将其视为块
<div class="header">
<h1>A Headline</h1>
<h2>A clever subtitle</h2>
</div>…其中该块对应于样式表中 .header 的规则。我可以看到如何为该块设置高度，设置背景图像，甚至可以更改其内部文本的颜色和大小。
Robin Rendle
我坐在后院，翻阅着 Jeffrey Zeldman 的《使用 Web 标准进行设计》，突然间我意识到：网页设计可以超越仅仅为我那愚蠢的乐队创建网站。通过一条简单的命令，网站就可以展现其内部结构，其内部逻辑，因为到那时，Web 检查器允许我通过更改 padding 或 margin 的值来移动屏幕上的盒子。
然而，直到我尝试了这行 CSS 代码，我才真正着迷
.element {
float: right;
}使用这段小小的代码，我可以破坏整个页面，我可以将文本列挤在一起，并将图像抛到 oblivion 中；作者的珍贵文字由我随意压缩和拉伸，无论最终结果有多丑陋。
我现在意识到，正是这种对他人网站的肆意破坏，让一切都开始变得有点有道理。即使在今天，作为一名专业的网页设计师，我仍然喜欢破坏东西，并将网站视为我自己的私人游乐场。
Sarah Drasner
我是一个老手了，在 CSS 出现之前，我就在使用表格构建网页。当它刚出现时，我持怀疑态度。对我来说，最大的转变是 CSS Zen Garden。这个网站非常出色地展示了如何将表现形式和内容解耦，以及 CSS 在布局和控制方面的强大功能。能够避免重复自己，只需声明一次，就可以将其传播到任何地方，这让我感到非常兴奋。
但我在使用 CSS 时的“顿悟”时刻却有所不同。我的情况与 Chris 非常相似，它始于盒子，但略有不同
- 有一些元素像盒子一样工作，你可以控制它们的位置和间距。
- 有一些元素像文本一样工作，你可以通过行高、字体等来控制它们。
- 如果我思考浏览器如何查看元素和样式，我就可以调试它。
在那之后，我开始沉浸在使用 CSS 的纯粹创造力中。它始于代码与设计的交汇点，但此后已经发展得更远。富有想象力的编程，如动画、生成代码，以及所有额外的魔法，如 for 循环。用于构建设计系统的组织能力，以及 SASS 允许的 mixin、extends 和变量。
你的顿悟时刻是什么？
很多人在 Chris 之前写的那篇文章中分享了他们的经历，但了解那些可能在文章发表后才开始使用 CSS 的其他人的顿悟时刻会很有趣。
我们还在 Twitter 上提出了这个问题
很久以前，我们讨论过你的“CSS 顿悟时刻”https://#/UGKciONYUl
让我们再做一次！
你是什么时候开始“理解” CSS 的？
— CSS-Tricks (@Real_CSS_Tricks) 2016年7月6日
我们得到了一些有趣的回复！以下是一些
@Real_CSS_Tricks head { display: block;} 对我来说是一个重要的时刻
— James Nowland (@jnowland) 2016年7月6日
@Real_CSS_Tricks position: absolute 相对于最近的已定位祖先进行定位
— Patrick Marx (@ptrckmrx) 2016年7月7日
@Real_CSS_Tricks 可能是在我与魔鬼达成交易的时候。
— Billy Purvis (@mrmonkeytech) 2016年7月6日
你的顿悟时刻是什么？你是查看网站源代码寻找答案吗？或者也许是朋友在教你？也许甚至是你读过的一篇博文，并且仍然将其收藏起来分享。无论是什么，请在评论中分享！
天哪，我的顿悟时刻是在 1998 年到 1999 年之间——是的，还是 CSS 1——当时我在一本杂志上读到它，并意识到我可以使用它来定位和装饰盒子和排版。
我的顿悟时刻是找到了两个程序，叫做 Teleport Pro 和 Hot Dog Pro。Teleport Pro 的功能是完整下载一个网站，然后剥离每个元素并重新构建它，以尝试找出它们是如何做到的。我的顿悟时刻是我终于弄清楚了如何使用浮动（后来是定位）来堆叠一个头部、三个并排的块和一个页脚。当我第一次完成无表格设计时，那是一个神奇的时刻……我开心了好几天 :)
我脑海中最大的“叮”的一声出现在我上大学后的那个暑假，我的第一门 HTML 课程中。当我意识到 class .thisClass 可以从 thisFile.css 中执行 {这些操作} 时，我基本上就开始了我的征程。
CSS 非常像英语，呃，语言，这非常有帮助。我经常告诉人们，它真的不难理解，这实际上是真的；当我开始那门课程时，我的室友对此一无所知，就像我一样，现在仅仅通过观看我做作业，他就了解了基础知识。
当我开始使用 Bootstrap 时。当我真正开始深入研究该框架时，它迫使我开始将 CSS 声明的类视为可以多次应用于多种 HTML 元素的组件。在此之前，我非常专注于 HTML 元素本身，并尝试将特定于该元素的声明拼凑在一起。
我的顿悟时刻来自使用一个名为 Stylish 的 Firefox 插件。Stylish 允许你获取一个现有的网站，并使用某人创建的“用户样式”来使该网站看起来更好或工作得更好。其中一些用户样式非常简单，我可以轻松地编写它们。我的顿悟时刻是我意识到我可以使用 CSS（与 Stylish 结合）来更改我经常访问的网站。我甚至可以将一个新的、未开发的网站视为一个非常简单的“现有网站”，并从那里开始对其进行样式设置。
我的顿悟时刻是使用 position 和 float。当应用绝对定位时，元素是如何变化的。
最棒的部分是当我意识到浮动会将元素从正常的文档流中弹出，并且需要更精确的定位。
当我弄清楚级联部分、块/内联之间的区别、定位的真正工作原理以及特异性时
天哪，我老了。我第一次看到 CSS 工作是在 Windows 98 的帮助页面上。在那之前，Netscape 不支持 CSS。IE 从 IE3 开始就实现了 CSS，但没人使用它。我们使用表格作为网格布局。
然后我注意到 Windows 帮助页面 看起来像 HTML（实际上是 CHM），但它在某种程度上有所不同。
我找到了一种反编译 CHM 文件的方法，它具有完整的文件结构，包括 html、图像和 CSS。我注意到它与我过去使用的 HTML 不同。它不是用表格或标签制作的，当我打开 CSS 文件时，它包含颜色、大小、边框，我可以更改它。
它改变了一切。我再也不想要表格了。在那之后，我仍然使用表格很长时间，因为 CSS 还没有完善，设计师也不会改变他们的工作方式。但最终，我开始在浏览器能够理解它时引入我发现的东西。
当我理解盒子模型的那一刻，我意识到我对这个叫做“css”的东西有了一些控制权。
当我意识到，基本上 display:block 只是垂直排列元素，而 display: inline* 是水平排列它们的时候。
但它并没有持续下去……
当我意识到我的团队中的其他人比我更了解 CSS 时，我意识到我能做的最好的事情就是确保他们有时间完成最好的工作……
当我发现百分比的 padding-top（padding-top:25%）是根据其父元素的宽度而不是高度计算的时候。
我在 CSS 中有两个“啊哈”时刻，它们都与位置和网页布局有关。
1) Position absolute 的 top 和 left 属性从具有 position: relative; 的下一个父元素开始。（我的网站到处都是，因为我在任何地方都使用了 position absolute）
2) 第二个是，我可以使用 margin 和 padding 来创建我想要的布局，而不是使用“position”来创建布局。然后我就可以预测网站在当时大多数屏幕尺寸上的布局方式。
学习这些东西让我有信心将网站发布到线上，而不是仅仅保存在本地。
我最大的“啊哈”时刻是我意识到我可以相对于相对定位的父元素绝对定位元素。这对我来说是一个改变游戏规则的时刻……当然，在 Flexbox 出现之前很久。
在我职业生涯中的另一个重要的“啊哈”时刻是在我为一个真正的客户完全完成了我的第一个手工编码的网站后，我意识到它在 IE5 中的渲染效果与在 Firefox 中完全不同。拍额头 当时我仍然认为自己严格来说是一个设计师，只在 Mac 上工作，跨浏览器兼容性和操作系统虚拟化的概念对我来说是全新的。我经历了一次压力很大、令人沮丧，但最终富有启迪意义的前端开发的艰难课程。这真正是我开发生涯的开始。
CSS 已经走了很远……很远。现在我在 Web/移动应用程序的上下文中编写 CSS（SCSS！），我不断地对行业中出现的技术和方法印象深刻，例如预/后处理器和 BEM，它们使我的代码易于管理、防弹，并让我的同事们惊叹不已。
一开始只是使用 css 来更改链接的颜色而不是使用，并且喜欢我只需要做一次它就应用于所有锚标记。我花了很长时间才开始使用类名。但最大的“啊哈”时刻是我第一次看到“位置就是一切”，并开始阅读关于 css 和浏览器差异以及 DOM 渲染的博客。当我最终意识到浏览器如何使用 css 时，调试和补偿浏览器问题变得更容易了咳嗽 IE 咳嗽
哦，糟糕。我试图在我的回复中显示 html 标签，而不是实际使用它们，并且弄乱了帖子。
我的是在 An Event Apart 上观看 Eric Meyer 将表格拆开并重新组装成条形图。仅仅意识到所有元素都是相同的，它们只是浏览器设置了 CSS 默认值。并且 99% 的时间你可以用任何你想要的覆盖这些默认值。
我的是阅读关于 CSS 的书籍并发现可以用它创建下拉菜单！
这些天我在经历类似的顿悟，即我过去用 JavaScript/jQuery 做的很多事情现在可以用 CSS 来做，并且得到了广泛的支持，以至于我可以依靠它们能够工作。
我的是当我意识到所有元素都只是盒子（display: block）或文本（display:inlines）的时候。
我的 CSS 时刻是我发现我可以使文本发光、配置背景和许多有趣的特效，而无需触碰 HTML 页面。我一直最喜欢的 CSS 功能是渐变。
对我来说也是 CSS Zen Garden。我当时是 CSS 新手，Zen 向我展示了包装器以及在这些包装器内放置（和控制）所有内容的概念。
body {background-image: url(“my-image.jpg”);
那是我知道 CSS 很棒的时候。我不必进入每个页面并更改顶部的图像。
我在印刷设计方面有丰富的背景——PageMaker/InDeisgn（以及可怕的 Quark）。我已经习惯于使用“样式”库——基本上是创建一组元素，然后简单地将该元素名称应用于页面上的某个内容，它就会动态更改和调整。
奇怪的是，我认为 CSS 的工作原理与我面对面的联系完全错过了我。在本世纪初，我同时处理了许多印刷和网络项目，并且一直以困难的方式进行网络工作。HTML 非常容易——因为当时的 HTML 3.x 非常简单。快进几年，“一瘸一拐”地使用 CSS——我一直在使用它，但我找不到我周围的人来解释 ID 和 CLASS 之间的区别以及何时使用和何时不使用它们。为什么我不能使用 DIV 而不是 P 标签（讨厌附加到 P 标签的预定义样式——现在仍然讨厌）。大部分情况就像一头闯进瓷器店的公牛——勉强应付但很麻烦……
无论如何，在某个时刻，我终于在大脑中理解了印刷样式——相同的东西——我已经习惯了字体大小、颜色和间距等……所以总结一下，我的更多的是“哦，原来如此……”而不是“啊哈”时刻。
在那之后，我感到很生气，直到 CSS 3 变得更加规范，因为我习惯了在印刷界拥有大量的控制权，而这些控制权在 CSS 2.x 中不可用，我发现它在接下来的几年里限制性很大。然后 CSS 3 带来了大量专有标签——但我还是使用了它们，因为它们更像是在设置打印布局——我真的不在乎它们在 IE 中是否有效。
当我第一次看到 http://www.csszengarden.com/ 并意识到“你不需要表格！”的时候。
作为我在贝尔法斯特互动多媒体设计学位的一部分，我必须在 2003 年创建我自己的个人网站/博客。我基本上找到一个模板网站并复制了一个模板。这教会我如何浏览 HTML 文件及其对应的 CSS 并查看它们是如何组合在一起的。Firefox 刚刚问世，所以我可以使用 firebug 进行探索。
当我开始阅读 Rachel Andrews 的《CSS Anthology》这本书时，我真正体会到了“啊哈”时刻。它教会我了一些很棒的东西，还有《CSS Mastery》，我不确定是谁写的。
我必须同意 CSS Zen Garden 是我的。看到标记不变，以及人们想出的主题范围令人震惊。
我是一名网页设计学生，还有很多东西要学习。昨天我在尝试弄清楚在哪里放置我正在为课程设计的网站的结束 div 标签时发现了这个博客。我的课程是网络课程，我对自己的学习进度感到失望，但我一直努力自力更生，自己解决问题，而没有向讲师寻求帮助。我拥有大学学习专业的学士学位，在高年级时避开了数学和科学，并用一半的课程学习西班牙语，最终以接近 4.0 的成绩毕业，而且在 Duolingo 上意大利语、法语和葡萄牙语都很厉害，所以花几个小时努力工作/不聪明地工作却一无所获让我感到很谦卑。残疾人职业康复部门正在支付为期六个月的证书课程费用，因为我患有严重的听力障碍，无法像计划的那样担任国际 TEFL 教师。虽然我对可能陷入目前的职位并无法完成课程的前景感到非常恐慌，但我突然想到可以使用办公室电脑上的文本编辑器来跟随智能手机上的视频教程。我不知道我的雇主是否能理解我创建的仅包含“test”字样的、用 css 创建的包含彩色方框的索引文件的意思。这非常有帮助。此外，我意识到，尤其是在我目前的工作中整天使用电脑后，试图在我的 13 英寸屏幕的 macbook pro 上并排观看在线课程和 sublime 文档，简直是在折磨我的理智，我不得不把课程打印出来。我很难弄清楚哪个结束 div 标签属于哪个 div，但最终弄清楚了如何使用 < !–blah blah blah tag ends here– >。回家整理好标签后，我的代码通过了验证器，没有错误——尽管我还有很多关于浮动、绝对/相对定位的问题需要解决。我开始感觉自己有能力提出正确的问题并找到像这样的博客了。谢谢！
很高兴听到有人正在做这件事。加油！
我最大的 CSS“哈哈”时刻是在完成我的第二个网站之后，这个网站是用基于 OOP 的 ActionScript3 怪物构建的。在那之后，我知道 HTML/CSS 是正确的选择。哈哈。
:hover 让我恍然大悟。
我之前在另一条评论中提到了 CSS Zen Garden，但我也需要感谢 Maxdesign 的 Listamatic 教程。费力地（痛苦地）将列表整理成型让我学到了很多关于盒子模型的知识。
事实上，该网站仍然在线：http://css.maxdesign.com.au/listamatic/
向 CSS Zen Garden（我的第一个顿悟时刻）和 Listamatic 致敬。这两者结合在一起，在教授学生 CSS 的功能时是非常棒的例子。
我想是在我最终需要使用 BEM 来为一个大型项目带来心理上的理智时。在此之前，CSS 仅仅是一种用来修饰内容的笨拙方法。
在使用 BEM 之后，它变成了定义组件（或一组组件）布局的有序方法。
然后 CSS 模块让我大开眼界 :)
我第一次使用 CSS 时顿悟的时刻是在学校里，当时我们被要求构建一个小型网站来展示一些我现在都不记得的东西。我意识到我可以使表格看起来不那么丑陋，甚至可以通过一个带有背景图像的额外元素为侧边导航添加一个圆角底部边框（大约在 2005/2006 年，所以当时无法使用 border-radius）。
然后 CSS3 出现了，但当时对我来说太复杂了。
第二个顿悟的时刻是在最近，当我了解到 box-sizing: border-box;。
我也必须同意 @ptrckmrx 关于 position: absolute; 的看法——一旦我理解了它的工作原理，它就减少了很多麻烦。
嗯……到处都是年轻人，看来是这样 o.O
我以艰难的方式学习了 HTML，也就是使用盲表和间隔 GIF 进行制作。然后，可能是在 2001 年或 2002 年左右，CSS 突然变得重要起来，每个人都在谈论它。告别了费力地裁剪图像并将其重新拼接到布局中的日子（好吧，不完全是：FireWorks 已经为你做得很好了）。
真正让我开始的不是我读到的任何花哨的文章或书籍，甚至不是《驯服列表》，尽管它确实产生了巨大的影响。真正让我开始的是这个图层的东西，你只能在 Dreamweaver 中才能正确地管理它。给我留下了深刻的印象，很多。很有趣。在那之后，《驯服列表》终于让我从“为什么？表格更适合导航”的旧派人士转变为“哦，CSS 确实有效——别管这个破碎的盒子模型，IE 一直都是个讨厌鬼”的新派孩子 :)
来自很久很久以前的一个有趣的片段：图像（地图）列表。基于列表的图像地图与悬停背景图像的组合；一个仍然存在的例子是我 11 年前的网站（不过要小心它的丑陋）：http://old.f2w.de
现在变态的事情是：使用 CSS 变换，实际上可以将其变成最新的东西 :D
再见，w0lf。
我认为我一个重要的顿悟时刻是发现了 reset.css。啊哈！尽管在此之前我使用 css 已经很多年了，并且有过许多其他的顿悟时刻，但这在我的脑海中似乎非常难忘。
其他一些时刻是
行高
像盒子一样的元素
像文本一样的元素
相对元素的子元素的绝对定位（某些浏览器需要 position: relative 才能正确显示）
图像（等）的百分比宽度或高度指的是父容器
这只是一些。:-)
当我最终弄清楚如何最好地使元素浮动时，在此之前我以为我懂了……然后我真正懂了。那是一个美好的日子。哦，还有伪元素第一次出现时也很棒，从无到有地创造一些东西。最后能够使表格行像 div 一样工作。太神奇了。