今天小编跟大家讲解下有关CSS 的特性值 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 的特性值 的相关资料，希望小伙伴们看了有所帮助。
css 值的解析css 中的声明，由 css 的特性和值，中间以":"隔开组成。
我们可以使用 css 选择器，为选中的元素设置需要的样式。
在介绍 css 的特性和值的时候，特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值，不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正，也就是浏览器容错。
那么，有没有想过，在我们给予一个特性正确的值的情况下，浏览器应该怎样处理呢？是否最终你看到的就是你设置的值呢？答案是否定的！
当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree )，那么，它必须为文档树中的每一个元素，根据目标媒介类型所适用的每一个特性，指定一个值。
而开发者给某个元素的 css 特性设置某个值，到这个元素的特性值被计算渲染，也就是得到最终的值，需要经过四步计算：
通过指定值 ( specified value ) 确定这个值；将这个值分解为一个可以用来继承的值，即计算后的值 ( computed value )；必要情况下把计算后的值转换成一个绝对的值，即使用值 ( used value )根据显示环境的限制，改变使用值以使之能够显示在用户端，最后这个值被称作实际值 ( actual value )。这些值的计算过程类似工资的计算过程，你的应得工资是一个设置值，实际工资还要减掉你的缺勤，保险，个人所得税等……实际计算出来的数字才是应用到你身上的具体数额。
下面来详细的介绍这四个步骤的四种值。
指定值一般来讲，开发者设定的值，即为指定值，但是最终这个值的确定还需考虑其他几个方面( 按照优先顺序排列 )。
层叠顺序首先考虑有层叠顺序的情况，即开发者明确了设置了 css 特性的值。
层叠顺序会影响开发者设定的值，所以，应该根据层叠顺序来确定声明的优先级别，优先级高的声明才会起作用。关于层叠顺序，后续会有详细的说明。
例如，开发者在定义样式的时候，加了 '!important' 的声明要优于未加 '!important' 的声明。
div{ height : 100px; height : 130px !important;}其中，带有 '!important' 的 height 声明才是指定值。
继承( inheritance )如果没有明确的设置这个值，那么会先考虑它是否继承了父元素的值。这时候指定值使用它父元素的值，通常是父元素的计算值。
例如：
<p>The greet <em>is</em> good!</p>EM 元素没有指定颜色，他将继承父元素的颜色用来显示字符串"is"。因此，EM 元素是红色。EM 元素 'color' 特性的指定值在没有层叠影响的情况下，就是"red"。
初始值最后，在不存在以上两种情况的时候，使用元素的初始值。
如果不设置元素的 'width'，它的指定值就是"auto"；对于 'font-size'，不设置的情况下，其指定值是"medium"。
关于指定值在 Javascript 中的获取方法，可以使用"element.style.property"语句模式：
<p id="container">The headline <em id="sub">is</em> important!</p><div id="info"></div><script type="text/Javascript"> window.onload = function() { var container = document.getElementById("container"); var sub = document.getElementById("sub"); var info = document.getElementById("info"); info.innerhtml ="container width : "+ container.style.width +"<br/>container color :"+ container.style.color +"<br/>sub color :"+ sub.style.color; }</script>经过测试可知，此种方式只适合获取设置的值，对于初始值和继承后的值都没有取到。
计算值指定值在层叠的过程中被分解成计算值。例如，URI 会被解析成绝对地址，而 'em' 和 'ex' 单位会被计算为 pixel 或者绝对长度。
例如:
<divhl_4">em;">hello!</div>浏览器默认 ‘font-size’ 是 ‘16px’，所以 ‘1em’ 计算值应该是 ‘16px’。
当指定值不是 ‘inherit’ 的时候，计算值应该是 css 特性定义的"计算后的值"一行所标明的值。例如对 'border-top-width'的特性说明的最后一行：
Computed value: absolute length; '0' if the border style is 'none' or 'hidden'
以上标明，边框宽度的计算值是一个绝对长度，当 border 的设置值是 ‘none’ 或 ‘hidden’ 的时候，计算值为 0。
当 css 特性不适合元素时，计算值还是存在的。
<divhl_3">left:1em;">hello!</div>如上代码中，div 元素设置 'left' 值为"1em"，计算后的值为"16px"；但是，'left' 特性并不适合于非定位元素。
使用值在处理计算值的过程中，文档没有被格式化，因此，有些值是无法确定的。比如，百分比宽度的元素，最终宽度是与它包含块的宽度有关， 所以，值只有在包含块确定下来之后才能确定。
可以说，使用值是将计算值和有依赖关系的值最终转化成的绝对的值。
利用 Javascript 来获取元素的使用值，可以采用如下函数：
function getStyle(obj, style) { var _style = (style =="float") ?"styleFloat": style; return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() { return arguments[0].charAt(1).toUpperCase(); })];}其中，需要注意的是，在 IE 里，浮动的计算值不能直接使用 'float' 特性来取， 需要使用的是 'styleFloat'，可能 IE 中还存在其他类似的情况。请根据实际用途修改函数。
最后，关于使用值，可以直接使用浏览器开发者工具查看，在 Firebug 中，使用值就是"计算出的样式"。Chrome 里则是"Computed Style"。
实际值经过以上三个步骤的处理，使用值基本上成为渲染所需要的值。但是用户端可能不能够在当前环境中使用这个值。例如：
div{ width: 3.1415926px;}在某些浏览器中，只能显示整数类型的长度，因此，虽然上面的宽度在计算后的值与设置的相同，但是，浏览器却没有办法按小数来显示。
Firefox Chrome 等浏览器都会以以一定的方式对值做一些取舍。Firefox 采用了四舍五入的形式，Chrome 中却会直接取整，在这点上需要特别注意哦。
原文：http://www.w3help.org/zh-cn/kb/004/
来源：爱蒂网
