浏览器样式计算：继承与默认值处理的深度解析
大家好，今天我们来深入探讨浏览器样式计算阶段中一个至关重要的环节：继承与默认值处理。样式计算是浏览器渲染引擎的核心部分，它负责为每个HTML元素确定最终的样式。在这个过程中，继承和默认值的处理方式直接影响着网页的视觉呈现。
样式计算概述
在深入继承和默认值之前，我们先简要回顾一下样式计算的大致流程：
- 解析CSS： 浏览器解析CSS文件（包括外部样式表、内部样式表和行内样式），构建CSS对象模型（CSSOM）。
- 匹配选择器： 浏览器遍历DOM树，将DOM树中的每个元素与CSSOM中的选择器进行匹配，找出适用于该元素的所有规则。
- 优先级排序： 如果一个元素匹配到多个规则，浏览器会根据选择器的优先级、声明的来源（作者样式、用户样式、浏览器默认样式）和
!important规则进行排序，确定每个属性的最终值。 - 继承： 某些CSS属性具有继承性，如果元素自身没有定义这些属性，则会继承父元素的计算值。
- 默认值： 对于既没有被显式设置，也没有继承的属性，浏览器会使用预定义的默认值。
- 值处理： 浏览器对属性值进行单位转换、计算等处理，例如将
em转换为px。 - 生成计算样式： 最终，浏览器为每个元素生成一个包含所有属性及其计算值的样式对象，这就是计算样式（Computed Style）。
今天，我们主要聚焦于第4和第5步，深入剖析继承和默认值在样式计算中的作用和机制。
继承：属性的传递
继承是一种机制，允许某些CSS属性的值从父元素传递到子元素。并非所有属性都具有继承性，常见的可继承属性包括：
- 字体相关属性：
font-family,font-size,font-weight,font-style,font,line-height,font-variant - 文本相关属性：
color,text-align,text-indent,text-decoration,letter-spacing,word-spacing,white-space,direction,unicode-bidi - 列表相关属性：
list-style,list-style-type,list-style-position,list-style-image - 表格相关属性：
border-collapse,border-spacing,caption-side,empty-cells - 可见性相关属性：
visibility - 光标属性：
cursor
继承的运作方式：
当一个元素的某个属性没有被显式设置时，浏览器会检查该属性是否具有继承性。如果具有继承性，则该元素会继承其父元素的该属性的计算值，而不是原始的声明值。
代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
p {
font-size: 16px;
}
span {
color: red; /* 行内样式，优先级高于继承 */
}
#special {
font-size: 20px;
}
</style>
</head>
<body>
<p>
This is a paragraph with <span>some text in a span.</span>
</p>
<div id="special">
This is a div with special font size.
<p>This is a paragraph inside the div.</p>
</div>
</body>
</html>在这个例子中：
body元素的font-family和color属性会被其所有子元素继承，除非子元素自身显式设置了这些属性。p元素的font-size属性只影响p元素自身，不影响其子元素（span元素）。span元素的color属性被显式设置为red，因此覆盖了从body继承的blue。#special的font-size属性被设置为20px，其内部的p元素会继承这个font-size，覆盖了p元素自身的font-size: 16px规则。
控制继承：inherit、initial、unset、revert
CSS提供了几个特殊关键字来控制继承行为：
inherit: 强制元素继承其父元素的属性值，即使该属性本身不具有继承性。initial: 将属性值设置为其初始值（即浏览器默认值）。unset: 如果属性具有继承性，则相当于inherit；如果属性不具有继承性，则相当于initial。revert: 将属性值恢复为用户代理样式表中定义的值 (浏览器的默认样式)， 类似于initial， 但是它会考虑用户代理样式表中的值。
代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
div {
border: 1px solid black;
padding: 10px;
}
.inherit {
color: inherit; /* 强制继承 body 的 color */
}
.initial {
color: initial; /* 设置为 color 的初始值 (通常是 black) */
border: initial; /* 设置为 border 的初始值 (none) */
}
.unset {
color: unset; /* 相当于 inherit */
border: unset; /* 相当于 initial */
}
.revert {
color: revert; /* 恢复为浏览器的默认 color (通常是 black) */
}
</style>
</head>
<body>
<div>
Default color.
<div class="inherit">Inherit color.</div>
<div class="initial">Initial color.</div>
<div class="unset">Unset color.</div>
<div class="revert">Revert color.</div>
</div>
</body>
</html>在这个例子中，我们可以观察到inherit、initial和unset关键字的不同效果。revert关键字的使用场景相对较少，主要用于覆盖用户定义的样式，恢复到浏览器的默认样式。
inherit、initial、unset、revert关键字的对比：
| 关键字 | 作用 |
|---|---|
inherit |
强制元素继承其父元素的属性值，即使该属性本身不具有继承性。 |
initial |
将属性值设置为其初始值（即浏览器默认值）。 |
unset |
如果属性具有继承性，则相当于inherit；如果属性不具有继承性，则相当于initial。 |
revert |
将属性值恢复为用户代理样式表中定义的值 (浏览器的默认样式)， 类似于initial， 但是它会考虑用户代理样式表中的值。 通常用于用户样式覆盖作者样式， 然后需要恢复到浏览器默认样式的情况。 |
默认值：最后的屏障
当一个元素的某个属性既没有被显式设置，也没有从父元素继承时，浏览器会使用该属性的默认值。每个CSS属性都有一个预定义的默认值，这些默认值可能因属性而异。
默认值的来源：
- CSS规范： CSS规范为每个属性定义了一个初始值（initial value）。这个初始值就是该属性的默认值。
- 浏览器默认样式表（User Agent Stylesheet）： 浏览器会提供一个默认的样式表，用于设置一些基本的样式，例如
body元素的margin和padding，h1到h6元素的font-size和margin，ul和ol元素的list-style和margin等。这些样式表会影响元素的默认呈现。
常见的默认值示例：
| 属性 | 默认值 | 说明 |
|---|---|---|
color |
black |
文本颜色默认为黑色。 |
background-color |
transparent |
背景颜色默认为透明。 |
font-size |
medium |
字体大小默认为medium，这是一个相对大小，会根据浏览器的默认字体大小进行调整。 |
display |
inline |
元素的显示方式默认为行内元素。 |
position |
static |
元素的定位方式默认为静态定位。 |
margin |
0 |
元素的上下左右外边距默认为0。 |
padding |
0 |
元素的上下左右内边距默认为0。 |
border |
none |
元素的边框默认为没有边框。 |
visibility |
visible |
元素的可见性默认为可见。 |
代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
/* 没有设置 background-color，使用默认值 transparent */
/* 没有设置 border，使用默认值 none */
}
</style>
</head>
<body>
<div>
This is a div with default background color and border.
</div>
</body>
</html>在这个例子中，div元素没有显式设置background-color和border属性，因此浏览器会使用它们的默认值：transparent和none。这意味着div元素将具有透明的背景，并且没有边框。
浏览器默认样式表的差异：
不同的浏览器可能会有略微不同的默认样式表。例如，不同浏览器对body元素的margin和padding的默认值可能不同。这就是为什么我们在编写CSS时经常需要使用CSS Reset或Normalize.css来消除这些差异，确保在不同浏览器上的呈现效果一致。
CSS Reset vs. Normalize.css:
- CSS Reset： 目的是完全移除所有浏览器的默认样式，将所有元素的样式重置为一致的初始状态。 通常会设置
margin: 0; padding: 0; border: 0;等属性。 - Normalize.css： 旨在保留一些有用的浏览器默认样式，并对它们进行标准化，使其在不同浏览器上呈现更一致的效果。 它修复了一些常见的浏览器bug，并尽可能地保留了元素的默认样式。
选择CSS Reset还是Normalize.css取决于项目的需求。如果需要完全掌控所有元素的样式，可以使用CSS Reset。如果希望在保留一些有用的默认样式的基础上进行开发，可以使用Normalize.css。
继承与默认值的交互
继承和默认值并不是相互独立的，它们共同作用于样式计算过程。当一个属性既没有被显式设置，也没有从父元素继承时，才会应用默认值。
优先级关系：
显式设置 > 继承 > 默认值
这意味着，如果一个属性被显式设置，那么它的值将覆盖继承的值和默认值。如果一个属性没有被显式设置，但可以从父元素继承，那么它的值将覆盖默认值。只有当一个属性既没有被显式设置，也没有从父元素继承时，才会使用默认值。
代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue; /* 显式设置 color */
}
p {
/* 没有显式设置 color，但会继承 body 的 color */
}
span {
/* 没有显式设置 color，也没有从父元素继承，使用默认值 black */
}
</style>
</head>
<body>
<p>
This is a paragraph with <span>some text in a span.</span>
</p>
</body>
</html>在这个例子中：
body元素的color属性被显式设置为blue。p元素没有显式设置color属性，但它会继承body元素的color属性，因此p元素的文本颜色为blue。span元素没有显式设置color属性，并且由于color属性不会从p元素传递到span元素（因为span自身没有定义color），因此span元素的文本颜色将使用默认值black。
调试继承与默认值
理解继承和默认值对于调试CSS问题至关重要。浏览器开发者工具可以帮助我们查看元素的计算样式，从而了解哪些属性是从父元素继承的，哪些属性是使用的默认值。
使用Chrome开发者工具：
- 打开Chrome开发者工具 (F12)。
- 选择 "Elements" 面板。
- 选择要检查的元素。
- 在 "Styles" 面板中，可以看到该元素的所有样式规则。
- 在 "Computed" 面板中，可以看到该元素的计算样式，包括从父元素继承的属性和使用的默认值。
通过查看计算样式，我们可以快速定位CSS问题，例如：
- 为什么某个元素的颜色不是预期的颜色？可能是因为该元素继承了错误的颜色，或者使用了错误的默认值。
- 为什么某个元素的外边距看起来不对？可能是因为该元素的外边距被父元素的外边距覆盖了，或者使用了错误的默认值。
总结：理解继承与默认值的意义
继承和默认值是CSS中非常重要的概念。理解它们的工作原理，可以帮助我们编写更简洁、更易于维护的CSS代码，并更好地调试CSS问题。继承可以减少重复的代码，提高代码的可重用性。默认值可以确保元素在没有显式设置样式的情况下也能呈现出合理的样式。
深入掌握样式计算核心
掌握继承和默认值的处理，是理解浏览器样式计算过程的关键一步。它能帮助你编写更高效、可维护的CSS代码，并解决常见的样式问题。通过浏览器开发者工具，你可以更直观地观察继承和默认值的应用，从而加深理解。