CSS值的计算

Dear 丶 2022-05-27 12:41 221阅读 0赞

元素的样式可能来自三个部分：

*  继承自父级元素的样式
 *  元素的浏览器默认样式
 *  元素自己声明的样式

而最终应用的样式就是这三个部分通过一套复杂的计算体系得到的。

## 应用值 ##

我们把最终应用的样式称之为应用值（used value）。

如果元素本身声明了样式，那么我们的应用值将采用元素声明的样式，这点我们没有什么问题了。但是如果元素没有声明该样式呢，它究竟用什么值来当做最终的应用值？

这就得回到我们的 CSS 属性定义了。

每个 CSS 属性在定义的时候都指出了该属性是默认继承的还是默认不继承的（本文下面附加了些常见的继承属性及非继承属性）。这就决定了如果元素没有声明该样式，怎么得到最终的应用值：

*  如果属性是默认继承的，则取父元素的同属性的应用值（computed value）。通过该方式得到的值我们称之为继承值（inherit value）
 *  如果属性是默认不继承的，则取该属性的初始值（initial value）

这样，除应用值外，我们又有了两种新值，它们分别为继承值（inherit value）和初始值（initial value）。

## 继承值 ##

为了进一步说明继承值，我们举个简单的例子来说明下，代码如下：

我继承了父元素的红色

我们给``元素设置了文本颜色为红色，``没有任何设置。

在计算``元素的最终颜色时，因为该元素本身没有声明`color`属性，且由于`color`属性属于默认继承类型的，所以会取父元素`color`属性的应用值（红色）。这样``通过父元素继承过来的值就是红色，而最后的应用值用得就是该继承值。

当然我们还可以通过显式设置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][Assigning property values_ Cascading_ and Inheritance]。（如果你能理解过来，那当然最好了，如果实在理解不了，可以先忽略，以后慢慢的自然就懂了）

## 附 ##

默认没有一个官方地址查看所有的继承属性或非继承属性，不过可以单独查看某个属性是否属于继承或非继承属性，如在 MDN 的参考手册中查看[`color`属性][color]，在“是否是继承属性”那一栏就写了“yes”，截图如下：

![value-inherit.png][]

### 常见继承属性 ###

*  文本相关属性都可以继承
    
    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 系列

[Assigning property values_ Cascading_ and Inheritance]: https://www.w3.org/TR/CSS22/cascade.html#value-stages
[color]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/color
[value-inherit.png]: /images/20220527/fcb77142254645269fb96ecfd0e13709.png