元素的样式可能来自三个部分：
- 继承自父级元素的样式
- 元素的浏览器默认样式
- 元素自己声明的样式
而最终应用的样式就是这三个部分通过一套复杂的计算体系得到的。
应用值
我们把最终应用的样式称之为应用值（used value）。
如果元素本身声明了样式，那么我们的应用值将采用元素声明的样式，这点我们没有什么问题了。但是如果元素没有声明该样式呢，它究竟用什么值来当做最终的应用值？
这就得回到我们的 CSS 属性定义了。
每个 CSS 属性在定义的时候都指出了该属性是默认继承的还是默认不继承的（本文下面附加了些常见的继承属性及非继承属性）。这就决定了如果元素没有声明该样式，怎么得到最终的应用值：
- 如果属性是默认继承的，则取父元素的同属性的应用值（computed value）。通过该方式得到的值我们称之为继承值（inherit value）
- 如果属性是默认不继承的，则取该属性的初始值（initial value）
这样，除应用值外，我们又有了两种新值，它们分别为继承值（inherit value）和初始值（initial value）。
继承值
为了进一步说明继承值，我们举个简单的例子来说明下，代码如下：
<p class="red" style="color: red;"><span>我继承了父元素的红色</span></p>
我们给<p>元素设置了文本颜色为红色，<span>没有任何设置。
在计算<span>元素的最终颜色时，因为该元素本身没有声明color属性，且由于color属性属于默认继承类型的，所以会取父元素color属性的应用值（红色）。这样<span>通过父元素继承过来的值就是红色，而最后的应用值用得就是该继承值。
当然我们还可以通过显式设置color属性的值为继承值，如color: inherit;。
注：inherit关键字用于显式地指定继承性，可用于继承性/非继承性属性。
初始值
每个属性都会有一个默认的初始值，如width属性的初始值为auto，font-size的初始值为medium。
初始值针对不同类别的属性具有不同的含义：
- 对于继承属性, 初始值只能被用于没有指定值的根元素（HTML）上
- 对于非继承属性 ,初始值可以被用于任意没有指定值的元素上
在CSS3中允许使用initial关键词明确的设定初始值。如font-size: initial;就是使用初始值。
其余值
除了上面的三种值之外，其实还有几种值的概念，如指定值（Specified value）、计算值（computed value）等等，具体可参看：Assigning property values, Cascading, and Inheritance。（如果你能理解过来，那当然最好了，如果实在理解不了，可以先忽略，以后慢慢的自然就懂了）
附
默认没有一个官方地址查看所有的继承属性或非继承属性，不过可以单独查看某个属性是否属于继承或非继承属性，如在 MDN 的参考手册中查看color属性，在“是否是继承属性”那一栏就写了“yes”，截图如下：
常见继承属性
文本相关属性都可以继承
color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、letter-spacing、word-spacing、white-space、word-break、overflow-wrap、line-height、direction、text-indent、text-align、text-shadow
列表相关属性
list-style-image、list-style-position、list-style-type、list-style
表格相关属性
border-collapse、border-spacing
visibility 和 cursor
常见非继承属性
盒模型相关属性
margin、border、padding、height、min-height、max-height、width、min-width、max-width、box-sizing
布局类属性
display、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align
系列类
background 系列、transform 系列、transtion 系列、animation 系列、flexbox 系列、grid 系列