CSS 属性赋值

_ang 发布于2019-08-29 13:14 / 3277人阅读

摘要：我按自己的理解做了个实验来查看这四个值，其中为了证明是用于继承的，将字体设为奇怪的。一般情况下，分不清最终值是还是，但这个例子中从的就看到这两个值的不同了。参考属性赋值的文档

原文：https://zhictory.github.io/cs...

文档树上的每个元素的 CSS 属性值会涉及到以下四种值：

Specified values 指定值

Computed values 计算值

Used values 应用值

Actual values 实际值

实际值应该就是我们平时看到的最终值，关于最终值的计算，文档是这么说明的：

The final value of a property is the result of a four-step calculation: the value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value").

属性的最终值是4步计算的结果：值通过指定来确定（specified value），接着处理得到一个用于继承的值（computed value），然后如果有必要的话转化为一个绝对值（used  value），最后根据本地环境限制进行转换（actual value）。

我按自己的理解做了个实验来查看这四个值，其中为了证明 computed value 是用于继承的，将字体设为奇怪的 16.00005px。



  A large heading

如代码所示列出了计算的过程，其中要注意两点：

一般情况下，分不清是用 computed value 还是用 actual value 来继承，但这个例子中从 em 的 font-size 的 computed value 是 80.0002 可得出是用 h1 的 computed value 来继承的。

一般情况下，分不清最终值是 used value 还是 actual value，但这个例子中从 h1 的 font-size 就看到这两个值的不同了。

参考：属性赋值的文档

GPU云服务器云服务器属性赋值 js 已有属性赋值 css属性访问CSS属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112465.html

前端之CSS

摘要：不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。当滚动元素时，背景会随之滚动。目录一.css三种引用方式 1.行间式 2.内联式 3.外联式 4.三种方式的优先级二.样式与长度颜色 1.基本样式 2.长度...

raise_yang 2019-04-23 13:22 评论0 收藏0
由一个“bug”到鲜为人知的jQuery.cssHooks

摘要：干想了半天，认为可能还是本身的写法问题。对象提供了一种通过定义函数来获取或设置特定值的方法。简单来说，给我们暴露了一个钩子，我们可以自己定义方法比如，来实现针对某个属性的特定行为。写在最前本次分享一下在一次jQuery赋值样式失效的结果中来分析背后原因的过程。在翻jQuery源码的过程中，感觉真是还不能说自己只是会用jQuery，我好像连会用都达不到（逃欢迎关注我的博客，不定期更...

ernest.wang 2019-08-26 11:44 评论0 收藏0
由一个“bug”到鲜为人知的jQuery.cssHooks

摘要：干想了半天，认为可能还是本身的写法问题。对象提供了一种通过定义函数来获取或设置特定值的方法。简单来说，给我们暴露了一个钩子，我们可以自己定义方法比如，来实现针对某个属性的特定行为。写在最前本次分享一下在一次jQuery赋值样式失效的结果中来分析背后原因的过程。在翻jQuery源码的过程中，感觉真是还不能说自己只是会用jQuery，我好像连会用都达不到（逃欢迎关注我的博客，不定期更...

malakashi 2019-08-30 15:46 评论0 收藏0
CSS变量（自定义属性）使用指南 — SitePoint

摘要：预处理器可以让你设置变量，并且在函数循环和数学操作等中使用。不同之处在于变量是运行在浏览器中的动态属性，而预处理器变量会被编译成普通的代码。变量提供了更多可能性但这并不是说你需要在二者之间选择其一你可以同时使用变量和预处理器变量的强大功能。 CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工...

light 2019-08-02 16:14 评论0 收藏0
CSS变量（自定义属性）使用指南 — SitePoint

摘要：预处理器可以让你设置变量，并且在函数循环和数学操作等中使用。不同之处在于变量是运行在浏览器中的动态属性，而预处理器变量会被编译成普通的代码。变量提供了更多可能性但这并不是说你需要在二者之间选择其一你可以同时使用变量和预处理器变量的强大功能。 CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工...

yankeys 2019-08-29 18:43 评论0 收藏0