css值

X1nFLY 发布于2019-08-30 15:52 / 994人阅读

摘要：表示用户代理的默认值。但在某些情况下这个值非常有用。这是结合形成文档后所得到的值。开发者指定值种用户代理默认值不可更改具有中划线的值表示被层叠规则覆盖即被权重大的给覆盖了样式。

CSS值的来源

首先,我们知道CSS虽然语法简单，但也不是瞎写的，其属性和值都是官方定义好了的,确切的说是浏览器厂商定义好的。

这些给定的值无外乎来源以下情况：

inherit 表示从祖先元素继承得到值。每个属性都有。

initial 表示用户代理的默认值。每个属性都有。

浏览器专有的值，通常有-ms-，-webkit-等前缀，也有一些值并无前缀。

浏览器共有的值，虽然共有，但各浏览器在实现上不一定相同。

因此可以肯定css兼容问题多来源于浏览器厂商实现css渲染的不一致和进化程度不一造成。

CSS规范中的值

最终呈现给用户的值经过了4步: 首先指定的值 (the "specified value"), 然后是通过了继承的值 (the "computed value"), 然后转化为使用值 (the "used value"), 最后是因为浏览器本身限制原因而得到的实际值 (the "actual value").

即 指定值-->计算值-->使用值-->实际值

Specified value

指定值有3种可能，一是用户代理的默认值即initial，一是美工写在程序里的值，一是显示指定继承的值即inherit.

通常，inherit和initial都不必显示指定。但在某些情况下这2个值非常有用。

computed value

这是在还没形成文档前,渲染引擎解析css文件，通过层叠规则继承关系计算出来的值。

used value

这是css结合html形成文档后所得到的值。

理解计算值和使用值的区别就在于浏览器是先分别解析HTML和CSS文件，然后再把它们融合起来。具体可参看这2张图。

webkit渲染流程

Geoko渲染流程

actual value

则是最后浏览器可用的值，比如说所有浏览器都不能处理小数点后7位，因此会被缩小精度。

这4个值源于规范，其他浏览器实现可能并不按此4步流程工作,但目前主流浏览器都是按此流程

注意层叠不同于继承。层叠是对单个css属性而言，继承则是对元素而言。层叠常常伴随着权重问题。

Chrome开发者

指定值(3种)

用户代理默认值(不可更改)

具有中划线的值表示被层叠规则覆盖,即被权重大的给覆盖了样式。

点击4可以跳转到相应的节点和样式视图。4之下的部分表示从哪个元素继承了样式，通常从这里就可以看到元素的祖先DOM链.·

灰色部分可以更改,表示规则不可用且在运行时计算。

例子:

我现在指定h1的高度如下

查看computed value可以看到chrome保留小数点后4位:

查看使用值(在这个盒子中看的原因是有盒子代表形成了文档即对应前面的used value)

最后实际值在这(直接在页面上看):

可以看到如果有padding,padding会在形成文档之后在显示到浏览器上时加到视觉上的宽高里去。当然如果有box-sizing属性的指定则又不一样，但可以得知这是发生在最后一步的。

参考

w3c css2.2 value

google chrome devtools eidt style

前端必读：浏览器内部工作原理

idc机房托管云服务器获取CSS属性值 php 获取css值 css引入css css

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

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

css属性的继承、初识值、计算值、当前值、应用值

摘要：计算属性的计算值通常包括将相对值转换成绝对值如单位或百分比。返回的解析值可能是计算值或应用值。最后，计算布局尺寸比如或百分数换算为像素值，结果即应用值。继承当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。 css属性我觉得大部分学习前端的人应该都没有按照教科书一般的来学习css，可能是类似搭积木一样，需要什么拿什么，所以可能最对一些基本的概念没有很好的理解，这里列出的是...

pkhope 2019-08-29 13:19 评论0 收藏0
CSS变量（自定义属性）实践指南

摘要：和这样的预处理器，让我们的代码保持良好的结构和可维护性。这是否意味着变量已经无关紧要了呢那可未必，主要是因为，变量与预处理器中的变量其实是不同的东西。而你是无法对预处理器中的变量做上面这些操作的。本文翻译自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处：葡萄城官网，葡萄城...

番茄西红柿 2019-04-23 13:26 评论0 收藏0
CSS变量（自定义属性）实践指南

摘要：变量，或者用它的官方称谓，叫作自定义属性，已经可用，并且有非常棒的浏览器支持，而也正在取得进展。这是否意味着变量已经无关紧要了呢那可未必，主要是因为，变量与预处理器中的变量其实是不同的东西。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 Sass和Less这样的预处理器，让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixin...

source 2019-08-29 16:33 评论0 收藏0
CSS变量（自定义属性）实践指南

摘要：变量，或者用它的官方称谓，叫作自定义属性，已经可用，并且有非常棒的浏览器支持，而也正在取得进展。这是否意味着变量已经无关紧要了呢那可未必，主要是因为，变量与预处理器中的变量其实是不同的东西。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 Sass和Less这样的预处理器，让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixin...

zzir 2019-08-05 14:50 评论0 收藏0
CSS概念【记录】

摘要：语法规则注释层叠优先级继承值块格式化上下文盒模型层叠上下文可替换元素外边距合并包含块视觉格式化模型布局模式语法属性值声明声明块规则规则集规则规则一个语句定义样式表使用的字符集告诉引擎引入一个外部样式表嵌套规则如果满足媒介查询的条件则条件规则 1、CSS语法 2、@规则 3、注释 4、层叠 5、优先级 6、继承 7、值 8、块格式化上下文 9、盒模型 10、层叠上下文 11、可替换元素 12、...

番茄西红柿 2019-04-23 11:55 评论0 收藏0
【Hello CSS】第七章-CSS的继承与可变性

摘要：中的继承实际上是父级元素对子元素的影响。如果使用的属性为继承属性，则将其视为，否则则视为。张载名言警句人若志趣不远，心不在焉，虽学不成。张载效果如下代码在我中，大家可以随时查看。作者：陈大鱼头 github： KRISACHAN 继承继承（英语：inheritance）是面向对象软件技术当中的一个概念。在 CSS 中与层叠（英语：Cascade）一起描述了如何设置样...

wangtdgoodluck 2019-08-30 11:27 评论0 收藏0