css值

CSS值的来源

首先,我们知道CSS虽然语法简单，但也不是瞎写的，其属性和值都是官方定义好了的,确切的说是浏览器厂商定义好的。

这些给定的值无外乎来源以下情况：

1. inherit 表示从祖先元素继承得到值。每个属性都有。

2. initial 表示用户代理的默认值。每个属性都有。

3. 浏览器专有的值，通常有-ms-，-webkit-等前缀，也有一些值并无前缀。

4. 浏览器共有的值，虽然共有，但各浏览器在实现上不一定相同。

因此可以肯定css兼容问题多来源于浏览器厂商实现css渲染的不一致和进化程度不一造成。

CSS规范中的值

最终呈现给用户的值经过了4步: 首先指定的值 (the "specified value"), 然后是通过了继承的值 (the "computed value"), 然后转化为使用值 (the "used value"), 最后是因为浏览器本身限制原因而得到的实际值 (the "actual value").

即 指定值-->计算值-->使用值-->实际值

Specified value

指定值有3种可能，一是用户代理的默认值即initial，一是美工写在程序里的值，一是显示指定继承的值即inherit.

通常，inherit和initial都不必显示指定。但在某些情况下这2个值非常有用。

computed value

这是在还没形成文档前,渲染引擎解析css文件，通过层叠规则继承关系计算出来的值。

used value

这是css结合html形成文档后所得到的值。

理解计算值和使用值的区别就在于 浏览器是先分别解析HTML和CSS文件，然后再把它们融合起来。具体可参看这2张图。

webkit渲染流程

Geoko渲染流程

actual value

则是最后浏览器可用的值，比如说所有浏览器都不能处理小数点后7位，因此会被缩小精度。

这4个值源于规范，其他浏览器实现可能并不按此4步流程工作,但目前主流浏览器都是按此流程

注意 层叠不同于继承。层叠是对单个css属性而言，继承则是对元素而言。层叠常常伴随着权重问题。

Chrome开发者

1. 指定值(3种)

2. 用户代理默认值(不可更改)

3. 具有中划线的值 表示被层叠规则覆盖,即被权重大的给覆盖了样式。

4. 点击4可以跳转到相应的 节点和样式视图。4之下的部分表示从哪个元素继承了样式，通常从这里就可以看到元素的祖先DOM链.·

5. 灰色部分可以更改,表示规则不可用且在运行时计算。

例子:

我现在指定h1的高度如下

查看computed value可以看到chrome保留小数点后4位:

查看使用值(在这个盒子中看的原因是有盒子代表形成了文档即对应前面的used value)

最后实际值在这(直接在页面上看):

可以看到如果有padding,padding会在形成文档之后在显示到浏览器上时加到视觉上的宽高里去。当然如果有box-sizing属性的指定则又不一样，但可以得知这是发生在最后一步的。

参考

1. w3c css2.2 value

2. google chrome devtools eidt style

3. 前端必读：浏览器内部工作原理