CSS学习之路,指定值,计算值,使用值。

    前面被问过这几个值得区别,没太研究,有点抠文字的感觉,既然到这儿了 ,就简答梳理下吧。

 

指定值(specified value):通过样式表样式规则定义的值;可以来自层叠样式表,如果没有指定,则考虑父级元素继承而来的继承制作为指定值,如果都没有,那么将使用默认值,也就是初始值;

计算值(computed value):以指定值进行计算得到计算值,在规则里出现em,百分比之类的具有计算属性的值,用来继承的值;

使用值(used value):把计算值转换成绝对值。

实际值(actual value):使用值受限于环境,最后得到的实际值,

下面具体解释,这个几个值产生过程:

  指定值:1、通过样式表规则指定,2、继承祖先元素的计算值得到,3、只用属性默认值也就是初始值;

  计算值:上一步中指定值经过层叠样式进行计算得到的计算值,在浏览器渲染文档之前就已经得到计算值。

  使用值:根据计算值和其他元素进行综合得到,类似line-height,width=10%需要依赖文档渲染完父容器之后得到该元素的具体属性使用值,父容器渲染完width为100px,则该元素的宽度为50px。

  实际值:浏览器会对使用值进行渲染,但限于浏览器等用户设定等限制,有些使用值会得到更改,最后呈现在页面上的也就是实际值了。

提供一小段来自CSS权威指南的代码,演示上述几个值

CSS代码

  body{

  font-size:10px;  /* body元素定义值,计算值字号也是10px,使用值和实际值都一样*/

  }

  div{

  line-height:1em;/*div元素的line-height的值为1em,但是计算值这是font-size数值乘上1em,元素没有直接指定font-size值,则继承body父元素的font-size计算值10px,

          那么line-height的计算值将是10*1=10px,使用值与实际值也就是10px了*/

  }

  p{

  font-size:18px;/*指定了font-size的值,那么就不用继承来自div的计算值10px,也可以说时覆盖掉了,怎么都好;line-height属性的值通过继承得到,此时继承来自div的line-height的计算值10px;*/

        /*小插曲提示,line-height属性值可以直接用来继承,但是继承时继承的是计算值,而div元素的line-height:1em不是计算值而是指定值,所以这样好理解了!*/

  }

HTML代码:

<body>  

  <div>

  <p>this is paragraph's font size is 18px</p>

  </div>

</body>

 

posted @ 2018-06-08 09:41  黑猴塞雷  阅读(320)  评论(0编辑  收藏  举报