【CSS 属性值分类: 指定值,计算值,使用值,实际值 的区别】

---

CSS 属性值的分类

• 开发者设定的 指定值 ≠ 实际值的情况
• 浏览器 和 属性值的关系
  • 浏览器给 元素赋值: 当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree )
    • 它必须为 文档树中的每一个元素，
      • 根据 目标媒介类型 所适用的 每一个特性，指定 一个值。

---

• 从 指定值 到 实际值的 过程: 指定值 → 计算值 → 使用值 → 实际值
  • 值的 4 步计算: 开发者 设置的属性的指定值，到这个 元素的属性值 被计算渲染，得到 最终的值，需要经过 四步计算：
    • ① 指定值: 通过规则 确定一个“指定值 ( specified value ) ”
    • ② 计算值: 将这个值 转换成 一个 可以用来 继承的值 = 计算值 = 计算后的值 ( computed value )；
    • ③ 使用值: 必要情况下，把计算后的值 转换成一个绝对的值 = 使用值 ( used value )
    • ④ 实际值: 根据 显示环境的限制，使用值 转换成 能够 显示在用户端，最后这个值 被称作 实际值 ( actual value)。

---

⑴ 指定值

• 指定值: 优先级最高的指定值 + 继承值 + 初始值
  • 一般来讲，最常见的, 开发者设定的值 = 指定值（层叠优先顺序、继承、初始值 ）
• 根据 下列规则 给每个属性 分配指定值（按照 优先级排序）：
  • ① 指定值 和 层叠顺序: 可以来自 层叠样式表 css指定的 属性值.
    • 优先级高的值 = 指定值: 考虑有层叠顺序的情况，即开发者 明确了设置了 CSS 特性的值。
      • 层叠顺序 会影响 开发者设定的值，所以，应该根据层叠顺序 来确定声明的优先级别，优先级高的声明 才会起作用。
      • 例如,加了 !important 的声明 要优于 没有加的声明.
        • 带有 !important 的 height 声明 = 指定值
        • div{ height : 100px; height : 130px !important;}
  • ② 继承值: 父元素的计算值: (根元素 没有父亲)
    • 如果 没有指定值，则考虑 父级元素继承而来的 继承值 作为指定值.
      • 否则，如果属性 是继承的, 且 元素不是 文档的根元素，使用它 父元素的计算值。
        • 例如, 子元素 em 没有指定颜色，会继承 父元素的颜色 绿色 来显示 元素的文本. em 元素 color'属性的指定值 在没有层叠影响的情况下，就是 “green”。
          • <p style="color:green;">The greet <em>is</em> good!</p>
  • ③ 初始值(默认值): 如果都没有，那么将使用 默认值，也就是初始值；（初始值, 在每个属性的定义列表内 有说明。）
    • 比如,如果不设置 元素的 宽度 width，宽度的指定值 就是 auto；
    • 不设置 字体大小 font-size，字体大小的指定值 = medium。

---

⑵ 计算值

• 计算值: = 相对值 转换成的绝对值.
  • 在层叠中，指定值 决定计算值，而指定值 可以是一个绝对值（例如颜色值“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”。
      • 

---

⑷ 实际值

• 实际值
  • 实际值 = 使用值 被应用后的 近似值。
    • 如，一个用户代理 可能只能渲染一个整数像素值的边框（实际值），并且该值 可能被 强制近似于 边框的计算宽度值。
    • 经过以上三个步骤的处理，使用值 基本上 成为渲染所需要的值。
    • 但是使用值 也许不能 在当前环境中 使用这个值。例如：

div{
    width: 3.1415926px;
}

• 小数值: 在某些浏览器中，只能 显示整数类型的长度，因此，虽然上面的宽度在计算后的值 与设置的相同，但 浏览器却不能 按小数来显示。
  • Firefox ,会四舍五入
  • Chrome ,会直接取整

---

♣ 结束语 和 友情链接

• 参考文章
  • 指定值、计算值 和 实际值
  • 指定值，计算值，使用值
  • 定义值、计算值、使用值、实际值分别指什么

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭