```html

CSS网站

打开任何一个像样的网站，右键“检查”，你会看到密密麻麻的样式规则。有人觉得那是代码垃圾场，有人却读得津津有味。我属于后者。CSS不是编程语言，它更像一套协商机制——你写下的每一条规则，浏览器都可能跟你讨价还价。

去年帮朋友改一个烘焙工作室的官网，首页轮播图在手机上永远溢出两像素。查了半小时，发现是某条 width: 100% 下面藏着一个 padding: 0 1px。两像素。就这两像素，让整个页面在iPhone SE上横向滚动。你没法跟客户解释“这是盒模型的历史遗留问题”，只能默默加上 box-sizing: border-box。CSS的脾气就是这样，它不报错，只摆烂。

选择器里的权力游戏

刚入行时，我以为 !important 是终极武器。后来发现，它更像在会议室里拍桌子——能赢一次，但下次所有人都会防着你。一个项目里如果出现三个以上的 !important，基本可以判断：要么是接手了祖传代码，要么是开发者已经放弃治疗。

真正好用的往往是那些低优先级但精准的选择器。比如用 :where() 把权重归零，或者用 :is() 简化冗长的后代选择器。我见过一个电商网站，导航栏的样式写了整整四百行，其中三百行都在跟Bootstrap的默认样式打架。何必呢？直接覆盖变量不好吗。

布局：从 float 到 grid 的野生进化

2015年那会儿，用 float 做三栏布局是基本功。清除浮动要加 .clearfix，伪元素 ::after 里写 content: ""; display: table; clear: both;。现在呢？display: grid 一行搞定。但诡异的是，很多老项目还在用 float，因为“能跑就别动”。

Flexbox 刚普及时，大家疯狂用 justify-content: center 做垂直居中。后来发现，如果父容器没有明确高度，这招根本没用。于是又回到 position: absolute; top: 50%; transform: translateY(-50%);。绕了一圈，还是绝对定位最诚实。Grid 出来之后，我终于可以写 place-items: center 了——但浏览器兼容性又成了新问题。你看，CSS的进化从来不是线性的，它像一条被猫玩过的毛线。

那些没人告诉你的细节

写CSS最怕什么？不是写不出来，是写出来之后在某个浏览器上“看起来不太对”。比如 line-height 在Firefox和Chrome里对行内元素的处理就有微妙差异。再比如 position: sticky，父元素只要有 overflow: hidden 就失效——这个坑我踩过三次，每次都要愣五分钟才想起来。

还有字体渲染。Mac上好看的 font-weight: 300，到了Windows上可能细得像牙签。你调成400，Mac上又觉得太粗。最后只能写 font-weight: 350——对，CSS允许这种非整百的数值，虽然很多设计师不知道。

“CSS不是用来控制的，是用来协商的。” —— 某个凌晨三点还在调z-index的人

z-index 也是个玄学。明明写了 z-index: 9999，弹窗还是被某个下拉菜单盖住。原因？父元素创建了新的层叠上下文。transform、opacity、filter 都会触发。你只能一层层往上找，像剥洋葱一样，最后发现是某个 will-change: transform 在捣鬼。

写CSS的人，多少有点强迫症

我认识一个前端，他的CSS文件里所有属性按字母顺序排列。颜色值统一用十六进制小写，缩进用两个空格。他说这不是洁癖，是“为了以后改的时候不骂自己”。另一个朋友则完全相反，所有样式写在一行里，用 /* 注释 */ 隔开。他说这样滚动少，效率高。你看，连代码风格都能吵起来。

但有一点是共识：不要用 #id 写样式。除非你确定这个元素一辈子只出现一次。否则半年后你要覆盖它，只能加 !important，然后陷入死循环。

---

最后说个真事。有个网站叫“CSS Zen Garden”，同一个HTML文件，换不同的CSS，能变成完全不同的设计。这大概是CSS最浪漫的地方——结构不变，皮囊千变。你写下的每一行样式，都在悄悄定义别人看到的世界。至于那个世界是整齐还是混乱，是优雅还是暴躁，全看你有没有耐心跟浏览器好好说话。

下次再看到页面错位，别急着骂CSS。它只是一面镜子，照出你HTML里的那些将就。

```

本文地址：http://www.79wt.cn/news/1314b1699852.html