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

指定值（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>

CSS学习之路，指定值，计算值，使用值。的更多相关文章

  1. CSS学习（7）继承、属性值的计算过程

    子元素会继承父元素的某些css属性 通常跟字体相关的属性都能被继承,具体的可以在mdn里查询是否是可继承属性 属性值的计算过程(渲染过程) 按照页面文档的树形目录结构进行依次渲染 前提条件:渲染的元素 ...

  2. CSS学习摘要-浮动与清除浮动

    以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...

  3. CSS - 初始值、指定值、计算值、应用值、实际值

    初始值:未提供指定值且未从父元素指定值继承的 CSS 属性的值. 指定值:通过直接声明或 CSS 属性的值. 计算值:通过需要计算得到的值,如,继承和相对的尺寸.(注意:有些计算要等到布局确定才能进行 ...

  4. 前端学习之路-CSS介绍，Html介绍，JavaScript介绍

    CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...

  5. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  6. springboot 学习之路 6（定时任务）

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

  7. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  8. vue学习之路 - 4.基本操作（下）

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  9. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

随机推荐

  1. Faster-RCNN tensorflow 程序细节

    tf-faster-rcnn github:https://github.com/endernewton/tf-faster-rcnn backbone,例如vgg,conv层不改变feature大小 ...

  2. bzoj3992

    题解: 求模素数 p 原根的方法:对 p-1 进行素因子分解,记pi为p-1的第i个因子,若恒有a^((p-1)/pi) mod p ≠ 1  成立,则 a 就是 p 的原根.(对于合数求原根,只需把 ...

  3. noip2012

    题解: 闲着无聊做了一遍noip2012 我觉得出题出的好奇怪啊... 为什么两道倍增两道二分答案??? 两天第一题: 第一天第一题傻逼普及组题没什么好说的了 第二天第一题你会扩欧就秒了 两天第二题: ...

  4. 在 Xshell 中 使用 hbase shell 进入后 无法删除 问题

    在 Xshell 中 使用 hbase shell 进入后 无法删除 问题: 在hbase shell下,误输入的指令不能使用backspace和delete删除,使用过的人都知道,这是有多坑,有多苦 ...

  5. window上安装zabbix agent使用案例

    下载对应的zabbix windows版本 因为zabbix server使用的版本为3.2.0版本 所以下载window 3.2的版本 https://www.zabbix.com/download ...

  6. 大数据-kafka

    1Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 作用:1发布和订阅消息流,这个功能类似于消息队列,这也是kafka归类为消息队列框架的原因 2以容错 ...

  7. 2018牛客网暑假ACM多校训练赛（第三场）I Expected Size of Random Convex Hull 计算几何,凸包,其他

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round3-I.html 题目传送门 - 2018牛客多校赛第三场 I ...

  8. 【转】Linux 虚拟内存和物理内存的理解

    http://www.cnblogs.com/dyllove98/archive/2013/06/12/3132940.html 首先,让我们看下虚拟内存: 第一层理解 1.         每个进程 ...

  9. 【JavaScript】浏览器

    No1: [window]全局作用域,而且表示浏览器窗口 innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显 ...

  10. Codeforces 1076D Edge Deletion 【最短路+贪心】

    <题目链接> 题目大意: n个点,m条边的无向图,现在需要删除一些边,使得剩下的边数不能超过K条.1点为起点,如果1到 i 点的最短距离与删除边之前的最短距离相同,则称 i 为 " ...