【CSS 属性值分类: 指定值,计算值,使用值,实际值 的区别】
CSS 属性值的分类
- CSS 属性值的分类
- ⑴ 指定值
- ⑵ 计算值
- ⑶ 使用值
- ⑷ 实际值
- ♣ 结束语 和 友情链接
CSS 属性值的分类
- 开发者设定的 指定值 ≠ 实际值的情况
- 浏览器 和 属性值的关系
- 浏览器给 元素赋值: 当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree )
- 它必须为 文档树中的每一个元素，
- 根据 目标媒介类型 所适用的 每一个特性，指定 一个值。
- 它必须为 文档树中的每一个元素，
- 浏览器给 元素赋值: 当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree )
- 从 指定值 到 实际值的 过程: 指定值 → 计算值 → 使用值 → 实际值
- 值的 4 步计算: 开发者 设置的属性的指定值，到这个 元素的属性值 被计算渲染，得到 最终的值，需要经过 四步计算：
- ① 指定值: 通过规则 确定一个“指定值 (
specified value) ” - ② 计算值: 将这个值 转换成 一个 可以用来 继承的值 = 计算值 = 计算后的值 (
computed value)； - ③ 使用值: 必要情况下，把计算后的值 转换成一个绝对的值 = 使用值 (
used value) - ④ 实际值: 根据 显示环境的限制，使用值 转换成 能够 显示在用户端，最后这个值 被称作 实际值 (
actual value)。
- ① 指定值: 通过规则 确定一个“指定值 (
- 值的 4 步计算: 开发者 设置的属性的指定值，到这个 元素的属性值 被计算渲染，得到 最终的值，需要经过 四步计算：
⑴ 指定值
- 指定值: 优先级最高的指定值 + 继承值 + 初始值
- 一般来讲，最常见的, 开发者设定的值 = 指定值（层叠优先顺序、继承、初始值 ）
- 根据 下列规则 给每个属性 分配指定值（按照 优先级排序）：
- ① 指定值 和 层叠顺序: 可以来自 层叠样式表 css指定的 属性值.
- 优先级高的值 = 指定值: 考虑有层叠顺序的情况，即开发者 明确了设置了 CSS 特性的值。
- 层叠顺序 会影响 开发者设定的值，所以，应该根据层叠顺序 来确定声明的优先级别，优先级高的声明 才会起作用。
- 例如,加了
!important的声明 要优于 没有加的声明.- 带有
!important的height声明 = 指定值 div{ height : 100px; height : 130px !important;}
- 带有
- 优先级高的值 = 指定值: 考虑有层叠顺序的情况，即开发者 明确了设置了 CSS 特性的值。
- ② 继承值: 父元素的计算值: (根元素 没有父亲)
- 如果 没有指定值，则考虑 父级元素继承而来的 继承值 作为指定值.
- 否则，如果属性 是继承的, 且 元素不是 文档的根元素，使用它 父元素的计算值。
- 例如, 子元素
em没有指定颜色，会继承 父元素的颜色 绿色 来显示 元素的文本.em元素color'属性的指定值 在没有层叠影响的情况下，就是 “green”。<p style="color:green;">The greet <em>is</em> good!</p>
- 例如, 子元素
- 否则，如果属性 是继承的, 且 元素不是 文档的根元素，使用它 父元素的计算值。
- 如果 没有指定值，则考虑 父级元素继承而来的 继承值 作为指定值.
- ③ 初始值(默认值): 如果都没有，那么将使用 默认值，也就是初始值；（初始值, 在每个属性的定义列表内 有说明。）
- 比如,如果不设置 元素的 宽度
width，宽度的指定值 就是auto； - 不设置 字体大小
font-size，字体大小的指定值 =medium。
- 比如,如果不设置 元素的 宽度
- ① 指定值 和 层叠顺序: 可以来自 层叠样式表 css指定的 属性值.
⑵ 计算值
- 计算值: = 相对值 转换成的绝对值.
- 在层叠中，指定值 决定计算值，而指定值 可以是一个绝对值（例如颜色值“
red”），也可以是 一个相对值（例如“em”和“ex”需要 根据像素 或者 绝对长度 来计算）。 - ① 绝对值 = 计算值: 对于绝对值，不需要 经过计算 来得到计算值。
- ③ 相对值 转换为 计算值:
- 而相对值 必须转换为 计算值：
- ❶ 百分比值: 百分比 要乘以一个 参考值（每一个属性 都会定义 参考值是什么）
- ❷ 相对长度单位 值:
- 包含 相对长度单位的值（
em，ex，px）必须乘以 相应的字体 或 点的尺寸 以得到绝对值em和ex单位- 会被计算为 像素
px或者 绝对长度。 - 浏览器默认
font-size是16px- 所以
1em的计算值 = ‘16px’。
- 所以
- 会被计算为 像素
- 包含 相对长度单位的值（
- ❸ 相对地址: URI 会被解析成 绝对地址
- ③
auto值“:auto”值 必须由各属性给出的公式 加以计算，某些关键字（smaller，bolder，inherit）根据它们的定义 而加以替换。
- ④
inherit值, 继承值 = 计算值的 情况- 大部分 情形下，元素继承的是 计算值。
- 不过有一些 属性的指定值 也可以被继承（比如, 行高
line-height属性的 数字属性值值(不带数字的纯数字)）。
- 不过有一些 属性的指定值 也可以被继承（比如, 行高
- 子元素不继承 计算值的情况 在属性定义中 有描述。
- 大部分 情形下，元素继承的是 计算值。
- 当指定值 不是“
inherit”时，属性的计算值 根据属性定义列表中“计算值”一项 来确定。
- 在层叠中，指定值 决定计算值，而指定值 可以是一个绝对值（例如颜色值“
⑶ 使用值
- 使用值
计算值 + 有依赖关系的值 = 使用值 = 最终转化成的 绝对的值。
- 例如, 在处理计算值的过程中，文档没有被格式化, 此时，有些值 是无法确定的。
- 百分比值: 比如，百分比宽度的元素，最终宽度 是与它包含块的宽度有关， 所以，值只有在 包含块确定下来 之后才能确定。
- 例如, 在处理计算值的过程中，文档没有被格式化, 此时，有些值 是无法确定的。
查看 使用值
可以直接使用浏览器开发者工具查看
- 在 Firefox 中，使用值就是 “计算出的样式”。
- 谷歌 Chrome 里则是 “Computed Style”。
- 在 Firefox 中，使用值就是 “计算出的样式”。
⑷ 实际值
- 实际值
- 实际值 = 使用值 被应用后的 近似值。
- 如，一个用户代理 可能只能渲染一个整数像素值的边框（实际值），并且该值 可能被 强制近似于 边框的计算宽度值。
- 经过以上三个步骤的处理，使用值 基本上 成为渲染所需要的值。
- 但是使用值 也许不能 在当前环境中 使用这个值。例如：
- 实际值 = 使用值 被应用后的 近似值。
div{width: 3.1415926px;
}
- 小数值: 在某些浏览器中，只能 显示整数类型的长度，因此，虽然上面的宽度在计算后的值 与设置的相同，但 浏览器却不能 按小数来显示。
- Firefox ,会四舍五入
- Chrome ,会直接取整
♣ 结束语 和 友情链接
- 参考文章
- 指定值、计算值 和 实际值
- 指定值，计算值，使用值
- 定义值、计算值、使用值、实际值分别指什么
- 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭
【CSS 属性值分类: 指定值,计算值,使用值,实际值 的区别】相关推荐
- js数组查找最接近_js 2种方法从数组里面找到最接近某个数值的值（小于该指定值，并且大于其他值）...
1.用于递归查找 var arr = [6,8,1,6,8,7,9,10,11,55,74,12,3,5,6,8,9,4,2,3,5,4,86,31,5] let testStr = 0 let te ...
- 删除df中值为指定值的行
原始数据 假设有以下df: df = pd.DataFrame({'a': [1,2,3,np.nan,4,5], 'b': [4,5,np.nan,6,7,np.nan], 'c': [np.nan ...
- [译] Font-size：一个意外复杂的 CSS 属性
原文地址:Font-size: An Unexpectedly Complex CSS Property 原文作者:Manish Goregaokar 译文出自:掘金翻译计划 本文永久链接:githu ...
- 7、CSS 属性选择器
对带有指定属性的 HTML 元素设置样式. 可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性. 注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持 ...
- 前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
- css属性选择器，[]，=， ~=， ^=， ~=， $=， |=等符号含义
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css属性选择器 包括[]是否有某属性,=属性是否等于,~=属性包含,^=属性值以指定字符串开头,$=属性值以指定字符串结尾,*=属性 ...
- P14-前端基础-CSS属性选择器
P14-前端基础-CSS属性选择器 1.属性选择器案例 <!DOCTYPE html> <html><head><meta charset="UTF ...
- junit集成Hamcrest测试集合中某个属性是否包含特定值
junit已经集成Hamcrest但是还是需要引用hamcrest-library,不然只有基本方法,高级的没有 <dependency> <groupId>junit< ...
- css属性选择器诸如Class^=,Class*= ,Class$=释义
代码如下: .show-grid [class^="col-"] {padding-top: 10px;padding-bottom: 10px;background-color: ...
最新文章
- Nginx笔记系列（1）——Nignx的安装部署
- java 中遍历目录下所有文件
- Altium Designer -- 差分布线和阻抗匹配
- 如何获取Debug Android Hash Key
- 从svn导入多个项目_GIT和SVN相比有哪些优势？如何在团队内部推行GIT?
- [Perforce系列—] 1. 使用Perforce 命令 与常用命令
- javascript学习之利用DOM和正则表达式判断主流浏览器的类型
- iPhone企业应用实例分析之四：技术要点分析（1）
- Xshell和Xftp免费版下载安装
- JMP软件在质量管理中的应用简述
- 毕业论文参考文献格式GB/T 7714的Endnote设置教程
- 6.5 发散思维能力
- hass智能 小米扫地机器人_Siri能控制小米扫地机器人吗_小米智能家居控制系统...
- 支气管炎如何治疗，试试这些食疗方，马上见效！
- anchor free和anchor based的区别
- 【云计算的1024种玩法】一.半小时轻松搭建属于自己的Discuz论坛
- go http客户端设置ResponseHeader参数后返回Timeouthttp: ContentLength=xxx with Body length 0错误
- android读取运动数据权限_Android 计步模块（读取三星S健康步数）
- jquery京东新版左侧下拉分类导航菜单代码
- xposed框架安全模式_为什么很多人的手机明明已经解锁root，完全可以装Xposed框架，却还要用“太极Magisk版”？...