css解密

CSS 从来不是什么秘密。它只是把想法翻译成浏览器能懂的语言。但大多数人写 CSS 时，脑子里的翻译器是坏的。

我见过一个前端工程师，花了三小时调整一个按钮的垂直居中。他用的是 position: absolute，然后 left: 50%，top: 50%，再 margin-left 负值，margin-top 负值。那是在 2023 年。他完全不知道 flexbox 和 grid 的存在。更可怕的是，他不想知道。

真正的解密不是学会某个属性，而是理解浏览器怎么渲染你的代码。比如，你写 margin: auto 在 flex 容器里，它为什么能让元素居中？因为 flex 的 auto margin 会吸收所有剩余空间。这个逻辑，比背十个居中技巧有用得多。

再说说层叠。很多人怕它，觉得 z-index 是玄学。其实层叠上下文是个树结构，不是数字游戏。你给一个元素设了 transform: scale(1)，它就创建了一个新的层叠上下文。这时候，哪怕你给它 z-index: 999999，它也只能在自己那棵子树里比较。我见过有人为了压住一个弹窗，把 z-index 从 999 改到 99999，再改到 999999999，最后发现问题是弹窗的父元素有个 opacity: 0.99 的动画。那 0.99 的 opacity 就足够创建一个层叠上下文了。你调再大的数字都没用，它被关在笼子里了。

CSS 的另一个秘密是性能。不是所有属性都一样贵。改变 width 和 height 会触发布局，整个页面都要重新计算。改变 transform 和 opacity 则只触发合成，GPU 直接处理，便宜得很。所以，如果你想让一个元素动起来，别改 left 和 top，用 transform: translate()。这个区别，在低端手机上就是 60 帧和 15 帧的差别。

还有选择器。我见过有人写 .nav ul li a:hover { }，五层嵌套。浏览器解析选择器是从右往左的，所以它先找所有 a 标签，再一个个检查是不是在 li 里，再检查是不是在 ul 里，再检查是不是在 .nav 里。这个效率有多低？你自己品。写成 .nav a:hover 就够了，或者直接给那个链接一个类名。别让浏览器做多余的事。

但最核心的秘密，其实是继承和重置。很多人不知道，color 和 font-family 是会继承的，而 margin 和 padding 不会。这导致他们每个元素都写一遍 font-size，每个元素都写一遍 color。累不累？你只需要在 body 上设置一次，所有子元素自然就继承了。然后，你在需要不同的地方覆盖一下。这就像你家里的水管，主管道定好水压，每个水龙头只需要微调，而不是每个水龙头都接一个水泵。

最后说个我自己的事。有次我维护一个老项目，全局搜索 font-family，找到 47 处重复定义。我删了 43 处，只在根元素和两个特殊组件里保留。页面加载速度没变，但样式表体积小了 18KB。更重要的是，后来改字体时，我只改了一行。

CSS 不是考点，它是工具。工具的意义在于顺手，而不是炫技。你不需要记住所有属性的值，你只需要理解浏览器怎么思考，然后顺着它的思路走。它就会对你好一点。