css 值
- 高洛峰原创
- 2017-02-15 13:12:531294浏览
CSS值的来源
首先,我们知道CSS虽然语法简单，但也不是瞎写的，其属性和值都是官方定义好了的,确切的说是浏览器厂商定义好的。
这些给定的值无外乎来源以下情况：
inherit 表示从祖先元素继承得到值。每个属性都有。
initial 表示用户代理的默认值。每个属性都有。
浏览器专有的值，通常有-ms-，-webkit-等前缀，也有一些值并无前缀。
浏览器共有的值，虽然共有，但各浏览器在实现上不一定相同。
因此可以肯定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开发者
指定值(3种)
用户代理默认值(不可更改)
具有中划线的值 表示被层叠规则覆盖,即被权重大的给覆盖了样式。
点击4可以跳转到相应的 节点和样式视图。4之下的部分表示从哪个元素继承了样式，通常从这里就可以看到元素的祖先DOM链.·
灰色部分可以更改,表示规则不可用且在运行时计算。
例子:
我现在指定h1的高度如下
查看computed value可以看到chrome保留小数点后4位:
查看使用值(在这个盒子中看的原因是有盒子代表形成了文档即对应前面的used value)
最后实际值在这(直接在页面上看):
可以看到如果有padding,padding会在形成文档之后在显示到浏览器上时加到视觉上的宽高里去。当然如果有box-sizing属性的指定则又不一样，但可以得知这是发生在最后一步的。
CSS值的来源
首先,我们知道CSS虽然语法简单，但也不是瞎写的，其属性和值都是官方定义好了的,确切的说是浏览器厂商定义好的。
这些给定的值无外乎来源以下情况：
inherit 表示从祖先元素继承得到值。每个属性都有。
initial 表示用户代理的默认值。每个属性都有。
浏览器专有的值，通常有-ms-，-webkit-等前缀，也有一些值并无前缀。
浏览器共有的值，虽然共有，但各浏览器在实现上不一定相同。
因此可以肯定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开发者
指定值(3种)
用户代理默认值(不可更改)
具有中划线的值 表示被层叠规则覆盖,即被权重大的给覆盖了样式。
点击4可以跳转到相应的 节点和样式视图。4之下的部分表示从哪个元素继承了样式，通常从这里就可以看到元素的祖先DOM链.·
灰色部分可以更改,表示规则不可用且在运行时计算。
例子:
我现在指定h1的高度如下
查看computed value可以看到chrome保留小数点后4位:
查看使用值(在这个盒子中看的原因是有盒子代表形成了文档即对应前面的used value)
最后实际值在这(直接在页面上看):
可以看到如果有padding,padding会在形成文档之后在显示到浏览器上时加到视觉上的宽高里去。当然如果有box-sizing属性的指定则又不一样，但可以得知这是发生在最后一步的。
更多css值 相关文章请关注PHP中文网！