CSS属性不同情况下的值

初始值

也叫默认值，是一个属性在没有为其设置值时，所展现出来的默认值。就好像let num; num的值为undefined

MDN上的说法：

1. 可继承的属性值，初始值只能用在没有指定值的根元素上
2. 不可继承的属性值，初始值可以被用在任意没有指定值的元素上。

指定的方式是：赋值initial;

计算值

MDN教程

我不介绍MDN教程上有的东西。

核心概念：计算值是一个子元素继承自父元素的值。

总的来说，计算属性就是需要被计算的值，比如：

1. width: 50% | 20rem | auto.
2. font-size: 2em.
3. line-height: inherit | initial | unset | revert;
4. padding-left: 30%;
5. 等等

应用值

MDN教程

通俗点来讲，应用值就是计算值经过计算后得到的值，可通过window.getComputedStyle(element)来获取应用值

MDN上讲了：CSS2.1中，当父元素的width/height是百分值时，子元素能明确地继承它的值。当CSS属性不依赖于布局时(eg. display, font-size or line-height), 计算值和应用值一样！下列是依赖于布局的属性值：

• background-position
• bottom, left, right, top
• height, width
• margin-bottom, margin-left, margin-right, margin-top
• min-height, min-width
• padding-bottom, padding-left, padding-right, padding-top
• text-indent

当前值

MDN教程

举个栗子：

// html
<div class="par">
  <div class="child"></div>
</div>

// css
.par {
  width: 1000px;
}

.child {
  width: 11.23456%;
}

如果按照正常计算，.child的宽度应该是 112.3456px, 但是看下面的图，.child最后的宽度为：112.344px; 这其实就是一个浏览器能识别的数字的精度问题。