什么是指定值、计算值和实际值？答案

【问题标题】：what are specified value, computed value, and actual value?什么是指定值、计算值和实际值？
【发布时间】：2019-06-17 20:25:56
【问题描述】：

英语不是我的第一语言，所以我发现从 MDN 学习很难。

我认为从我读到的指定值是在样式表中指定的样式或从父元素继承的样式。

我真的不知道计算值是什么

实际值是实际使用的值

【问题讨论】：

@Teocci 你在添加评论之前读过这个问题吗？
1/ 没有您的母语翻译？ MDN 有一些语言的翻译贡献者，但它在法语中比在印地语或 suomi 中更活跃:) 2/ 你可能会发现 Greg Whitworth 最近在 ALA 上发表的一篇文章很有用：Braces to pixels。它讨论了解析、计算、布局和值auto、CSS 对象模型、格式化上下文、特异性等，但只是足够的细节而不是太多恕我直言。

标签： css

【解决方案1】：

看起来好像这些值都是一样的；即指定的、计算的和实际的值都是 1px，你看不到任何差异，你想知道为什么有这么多的短语来描述同一件事！
所以也许一些例子会说明清楚。

指定的值是你指定的任何值。例如，如果您在样式表中写入p {font-size:2rem;，那么p 的指定值显然是2rem。

然后浏览器计算以像素为单位的值，即（至少如果 1rem 为 16px）32px。那是计算值，用于显示（所以它也是使用值，在大多数情况下也是实际值）。

但是，在某些情况下 32px 是不可能的。例如，如果此特定字体是位图字体，并且 32px 版本不可用。如果只有 30px 版本，那么这就是实际显示在显示器上的实际值。

使用值也可以不同于计算值。例如，如果您的样式表中有p {width:600px; max-width:400px;}，那么计算值 仍将是600px，但使用的值（因此实际值）将为400px。

希望这会有所帮助。如果您需要更多示例，请询问。

【讨论】：

感谢您向我解释价值观！
有什么方法可以获得使用价值吗？例如，内联元素上的getComputedStyle() 返回"100px"（指定值）的margin-top，但我想得到"0px"。授予在浏览器检查中使用指定的值（它只是不垂直推送其他元素）。
@MinhNghĩa 有趣。正式的回答是内联元素没有有垂直边距，所以你不能说边距是0；它根本不适用。就像，例如，内联元素没有border-spacing，所以你不能说边框间距是0。
我们都同意 inline 没有有垂直边距，但是有这个词本身可能是可以解释的。例如，DevTool 仍然报告我的 span 有垂直边距，只是没有以某种方式显示/忽略。看看我的question，一个评论也用collapsing这个词来表示没有垂直边距。

【解决方案2】：

指定值：

指定值是提供但未生成的值。例如从外部css文件继承

继承父元素的值

使用属性的初始值

计算值： 计算值是使用相对定位或值时计算的值。对于 ex width:20% 是参考父计算。

实际价值： 准备使用的值是实际值。像font:10pt 这样的绝对值是一个实际的/绝对值，它不依赖于其他值。

【讨论】：

【解决方案3】：

【讨论】：