CSS样式计算：浏览器如何“读懂”你的样式？做前端开发时，肯定都碰到过这些头疼事：明明写了`color: red`，元

做前端开发时，肯定都碰到过这些头疼事：明明写了color: red，元素还是默认色；子元素用了百分比height，结果根本没效果；或者两个样式规则冲突，不知道哪个会生效。其实这些问题，根源都在“浏览器怎么计算样式”上——CSS规范早把这个逻辑定死了，搞懂它，调样式时就能少走很多弯路。

今天就从实际开发角度，把样式计算的核心逻辑拆透，既有规范里的关键规则，也结合咱们平时踩过的坑来聊。

一、浏览器计算样式的5步逻辑：从规则到最终值

不管是简单的静态页面，还是复杂的组件库，浏览器计算样式都逃不过这5步。咱们一步一步来，每步都结合实际开发场景说。

1. 第一步：收集所有匹配的样式规则

首先，浏览器会给每个DOM元素，收集所有“能匹配到它”的样式规则。实际开发中，我们接触的样式主要来自三块：

我们自己写的“作者样式”：比如引入的外部CSS文件、<style>标签里的代码，还有直接写在元素上的内联样式（style属性）——这是我们最能控制的部分；
浏览器自带的“用户代理样式”：比如Chrome会给body加margin: 8px，给<a>标签设color: -webkit-link（不是纯黑色，是浏览器预定义的链接色），所以我们写样式前常要重置这些默认值；
用户自定义的“用户样式”：比如用户开了系统深色模式，或者用浏览器扩展改了字体大小——这部分虽然不是我们写的，但会影响最终样式。

举个实际项目里的例子：

<style>
  /* 我们写的类选择器 */
  .card { color: #333; font-size: 14px; }
  /* 元素选择器 */
  div { padding: 16px; }
</style>
<!-- 内联样式 -->
<div class="card" style="font-size: 16px;">内容区</div>

这个div会被收集到的规则包括：Chrome给div的默认display: block、body继承来的margin（如果没重置的话）；我们写的.card和div规则；还有内联的font-size: 16px。

这里要注意：内联样式不是“独立来源”，本质是“作者样式里优先级最高的形式”——之前有人以为内联样式是单独一类，结果算优先级时出错了。

2. 第二步：层叠（Cascade）：解决规则冲突

收集完规则，最常见的问题就是“冲突”——比如上面的font-size，.card里写了14px，内联写了16px，到底用哪个？这时候就靠“层叠”来定优先级，CSS规范里的逻辑很明确，实际开发中我们记这三层就行：

第一层：按“重要性+来源”排序

优先级从高到低是：用户加了!important的样式 → 我们写的加了!important的样式 → 我们写的普通样式 → 浏览器默认样式。
比如用户通过浏览器设置强制“字体加粗!important”，就算我们写了font-weight: normal，也会被覆盖——这一点在做无障碍适配时要注意。

第二层：按“选择器特异性”排序

如果来源和重要性一样，就看选择器的“特异性权重”，用(A,B,C,D)表示，A>B>C>D：

A：内联样式（style属性），有就是1，没有就是0；
B：ID选择器（#id）的数量；
C：类、伪类、属性选择器（.class、:hover、[type="text"]）的数量；
D：元素、伪元素选择器（div、::before）的数量。

实际工作中，我们不用死记，举个例子就懂：

样式规则	来源	特异性(A,B,C,D)	谁生效？
`style="font-size:16px"`	作者内联	(1,0,0,0)	生效
`#card .active { ... }`	作者普通	(0,1,1,0)	次之
`.card:hover { ... }`	作者普通	(0,0,2,0)	再次之

像前面的div，内联样式的A=1，比.card的C=1优先级高，所以font-size:16px生效——这是我们调样式时最常用的判断逻辑。

第三层：按“定义顺序”排序

如果前两层都一样，就看“谁写在后面”。比如同一个样式表里，先写.card { color: blue }，再写.card { color: red }，最后生效的是红色——这个细节在维护旧代码时要注意，别漏看后面的覆盖规则。

3. 第三步：继承：补全没匹配到的可继承属性

如果某个属性“没匹配到任何规则”，而且它是“可继承属性”，元素就会继承父元素的“计算值”（不是我们写的原始值）；如果是不可继承属性，就跳过这步。

这里有个很多人踩过的坑：继承的是计算值，不是原始值。举个实际例子：

<div style="font-size: 2em;"> <!-- 父元素font-size：假设根元素16px，算出来32px -->
  <span style="font-size: 1.5em;">子元素</span>
</div>

子元素的1.5em是基于父元素的32px算的（32×1.5=48px），不是基于父元素写的2em——之前帮同事调样式，他一直以为子元素是按父元素的em值叠加，结果算出来的尺寸总不对，就是没搞懂这个点。

另外，哪些属性能继承？不用死记，记住“文本相关的大多能继承”就行：比如color、font-size、line-height、text-align；而布局相关的，比如width、height、margin、padding，都不能继承。如果想强制继承，用inherit关键字就行，比如child { margin: inherit; }，能继承父元素的margin计算值。

4. 第四步：初始值：规范给的“兜底值”

如果属性“没匹配规则，也不能继承”，浏览器就会用CSS规范定义的“初始值”——注意，这和“浏览器默认样式”不是一回事！

比如margin的初始值是0，但Chrome给body加了8px的margin——这是浏览器的默认样式，不是初始值。所以我们写重置样式时，body { margin: 0; }是“覆盖浏览器默认样式”，不是“修改初始值”。

再举几个常用属性的初始值，都是实际开发中会用到的：

width/height：初始值auto——width: auto时，块级元素会拉伸填满包含块，行内元素会收缩包裹内容；
display：初始值inline——所以<span>、<a>默认是行内元素，而<div>是浏览器用默认样式设为block的；
color：初始值canvastext——规范里的说法，实际就是系统默认的文本色，比如浅色模式下的黑色，深色模式下的白色。

如果想强制用初始值，用initial关键字，比如div { margin: initial; }，不管之前有没有样式，都会变回0。

5. 第五步：计算最终值：从“逻辑值”到“能渲染的值”

经过前面四步，每个属性都有了“原始值”（比如50%、2em、auto），最后一步就是把这些值转换成“计算值（Computed Value）”——这是样式计算的终点，也是后续布局的依据。

转换规则不用太复杂，记住核心：能转成绝对 value 的就转，依赖上下文的先保留。比如：

1.5rem（根元素16px）→ 转成24px；line-height: 150%（font-size16px）→ 转成24px；
width: 50%→ 保留50%（因为父元素宽度还没确定，要等布局阶段才知道具体像素）；
font-weight: normal→ 转成400，line-height: normal→ 转成1.2（取决于字体）。

这里还要区分“计算值”和“使用值（Used Value）”：计算值是“样式阶段的最终值”（比如50%），使用值是“布局阶段的最终像素值”（比如父元素400px，50%就成了200px）。

之前做自适应布局时，子元素height: 50%没生效，查了半天才发现：父元素height是auto，计算值也是auto，子元素的50%没法转成具体像素，最后就变成了auto——这就是百分比height无效的常见原因。

二、实际开发中的避坑指南

聊完流程，再跟大家提几个实际工作中容易踩的坑，都是我和同事们踩过的教训：

别把“浏览器默认样式”当“初始值”：比如ul的padding-left，Chrome默认给40px，但padding的初始值是0——重置样式时要记得覆盖，不然列表缩进会出问题。
!important别乱用：之前项目里有人为了让样式生效，给所有规则加!important，结果后面冲突了，高优先级的样式也覆盖不了，最后只能重构——!important只在“临时修复紧急问题”时用，常规开发别碰。
百分比height生效的前提：必须保证“父元素的height有明确计算值”（不是auto）。比如父元素设height: 400px，子元素height: 50%才会算出200px；如果父元素height: auto，子元素的百分比就会失效。
继承的是“计算值”，不是“原始值”：再强调一次，父元素写font-size: 2em（算出来32px），子元素继承的是32px，不是2em——别再按“原始值叠加”算了，会出错。

三、总结：搞懂样式计算，是为了快速调bug

其实我们不用背完所有CSS规范，只要理解这5步逻辑，调样式时就能“对症下药”：

样式没生效？先看F12里的样式面板，是不是被划掉了（优先级不够）；
百分比无效？查包含块的尺寸有没有明确值；
继承不对？看属性能不能继承，是不是继承了计算值；
尺寸不对？查计算值有没有转对，比如em是不是按父元素计算值算的。

CSS看似灵活，实则每一步都有规可循。平时多注意这些细节，下次遇到样式问题，就能少花时间瞎试，多花时间解决核心问题——这才是搞懂样式计算的意义。