对比标题的三个属性，得外加一个大家都熟悉的属性，inherit。

还得加一个层叠样式知识：

用户看到的样式 = W3C 标准样式 + 用户代理样式 + 程序样式。

且上面的公式满足层叠规则。

PS：用户代理多是指浏览器，就是常说的 UserAgent。是指负责显示 HTML 的终端。

正文

按照这样一个脑图先记一下：

我们这里使用 font-size 来举例说明。

initial

所谓 initial，如图，就是将这个属性的值设置为用户代理默认值。

先问一下，font-size 的默认值是什么？16px？

是 medium，刺不刺激？

印象中的默认值是不是有：16px, 400, normal 等等。

大几百号属性，鬼记得住。

所以，initial 的作用，就是偷懒行为，统一用它设置用户代理默认值就完了。

unset

这个的特性是：

• 有继承来的，有，就用
• 没有继承来的，用 W3C 标准样式默认值

revert

用回用户代理样式默认值。

实例对比

unset 与 revert 不单单是关联属性，主要区别在于标签上。

比如使用 h1 标签，font-size 的标准值是 medium，而浏览器环境下的用户代理设置默认是 2em，即 16px * 2 = 32px。

那么这段代码的展现其实就是这样：

<h1 style="font-size: initial;">initial</h1>
<h1 style="font-size: unset;">unset</h1>
<h1 style="font-size: revert;">revert</h1>

相当于：

<h1 style="font-size: medium;">initial</h1>
<h1 style="font-size: medium;">unset</h1>
<h1 style="font-size: 2em;">revert</h1>

而继承参与的情况可以这样看：

<style>
  body {
    font-size: xx-large;
  }
</style>

<h1 style="font-size: initial;">initial</h1>
<h1 style="font-size: unset;">unset</h1>
<h1 style="font-size: revert;">revert</h1>

这里给 body 加了样式，是大号字体，在 edge 下为 32px。

上面代码相当于

<style>
  body {
    font-size: xx-large;
  }
</style>

<h1 style="font-size: medium;">initial</h1>
<h1 style="font-size: inherit;">unset</h1>
<h1 style="font-size: 2em;">revert</h1>

总结

initial = 设置为属性的用户代理默认值，由于每个属性默认值不一定一样，所以可以偷懒统一设置

unset = 设置为该标签的此属性的标准默认值，有继承优先继承

revert = 设置为该标签的此属性的用户代理默认值