了解CSS的initial、inherit、unset和revert四大属性值

1. initial
2. inherit
• 可继承属性
• 利用 inherit 实现图片倒影功能
3. unset
4. 使用 unset 继承父级样式
• unset 的一些妙用
5. revert
• reset 和 revert 的不同之处
6. 总结

如果我问你position 有多少取值，你肯定会说static、relative、absolute 和 fixed 。当然，还有一个稍微生僻的 sticky 。其实，除此之外， CSS 属性通常还可以设置下面几个值：

• initial
• inherit
• unset
• revert

{
  position: initial;
  position: inherit;
  position: unset

  /* CSS Cascading and Inheritance Level 3 */
  position: revert;
}

了解 CSS 样式的 initial（默认）和 inherit（继承）以及更新的 unset 和 revert 是熟练使用 CSS 的关键。

initial

initial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）

inherit

每一个 CSS 属性都有一个特性就是，这个属性必然是默认继承的 (inherited: Yes) 或者是默认不继承的 (inherited: no)其中之一，我们可以在 MDN上通过这个索引查找，判断一个属性的是否继承特性。

譬如，以 background-color 为例，由下图所示，表明它并不会继承父元素的 background-color:

总结

了解 CSS 样式的 initial（默认）和 inherit（继承）以及更为新的 unset 和 revert 是熟练使用 CSS 的关键。虽然有点绕，但是熟练掌握之后，在很多小地方都有着妙用，灵活使用让你的代码更加精简。

作者：chokcoco