From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/used_value/index.html | 44 +++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 files/zh-cn/web/css/used_value/index.html (limited to 'files/zh-cn/web/css/used_value') diff --git a/files/zh-cn/web/css/used_value/index.html b/files/zh-cn/web/css/used_value/index.html new file mode 100644 index 0000000000..9bfc009164 --- /dev/null +++ b/files/zh-cn/web/css/used_value/index.html @@ -0,0 +1,44 @@ +--- +title: 应用值 +slug: Web/CSS/used_value +translation_of: Web/CSS/used_value +--- +

CSS 属性的应用值（used value）是完成所有计算后最终使用的值，可以由 window.getComputedStyle 获取。尺寸 (例如 width, line-height) 单位为像素, 简写属性 (例如 background) 与组成属性相符 (例如 background-color，display) 与 position 、float相符，每个 CSS 属性都有值。

+ +

详情

+ +

计算出CSS属性的最终值有三个步骤。首先，指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值)，或者默认值。然后，按规范算出 计算值computed value  (例如， span 指定 position: absolute 后display 变为 block)。最后，计算布局(尺寸比如 auto 或 百分数 换算为像素值 )， 结果即 应用值used value。这些步骤是在内部完成的，脚本只能使用 window.getComputedStyle 获得最终的应用值。

+ +

举例

+ +
没有明确的宽度。指定的宽度: auto (默认). 计算的宽度: auto. 应用的宽度: 998px (举例而言)。 +
明确的宽度: 50%. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 447px +
明确的宽度: inherit. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 221px .
+
+
+ +

与计算值的区别

+ +

CSS 2.0 只定义了 计算值 computed value 作为属性计算的最后一步。 CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。 对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样  (引自 CSS 2.1 Changes: Specified, computed, and actual values):

+ + + +

规范

+ +

CSS Level 2: Used Values

+ +

另见

+ + -- cgit v1.2.3-54-g00ecf