CSS值的处理过程

CSS值的定义到最终渲染实际上会经过一系列的步骤，这一过程在W3C Recommendation中有介绍，整个过程一共分为6步：

声明值：应用于元素的每个属性都会为它提供一个声明值，当然也可能存在多个，比如在多个样式表中重复声明
级联值：这一步其实就是在计算样式属性的权重，从而得到一个权重最高的值
指定值：它一般等于级联值或者默认值，继承属性用的继承值 inherit，非继承属性将用初始值 initial，也可以显式的设置 initial/inherit/unset 等关键字，从而保证每个元素上的每个属性都存在一个值
计算值：这一步是为CSS计算得出的值，转为需要使用的像素值（色彩值等等），注意这里最终得到的是绝对单位，比如rem在这一步就会转换成px
使用值：获取计算值并完成所有剩余计算的结果，使其成为文档格式化中使用的绝对理论值。
实际值：使用值原则上可以直接使用，但用户代理可能无法在给定环境中使用该值。例如，用户代理可能只能渲染具有整数像素宽度的边框，因此可能必须近似于已使用的宽度。此外，元素的字体大小可能需要根据字体的可用性或font-size-adjust属性的值进行调整。实际值是进行任何此类调整后的已使用值。
属性 声明值 级联值 指定值 计算值 使用值 实际值
font-size font-size: 1.2em 1.2em 1.2em 14.1px 14.1px 14px
width width: 80% 80% 80% 80% 354.2px 354px
亚像素
像素是成像面的基本单位也是最小单位，通常被称为图像的物理分辨率。如果成像系统要显示的对象尺寸小于物理分辨率时，成像系统是无法正常辨识出来的。亚像素是一种抽象概念，用于以逻辑像素的分数表示渲染对象的位置或大小，主要用于布局和命中测试。当前实现将值表示为 1/64 像素的倍数。这使我们能够使用整数数学并避免浮点不精确。尽管布局计算是使用 LayoutUnits 完成的，但绘制时的值仍与整数像素值对齐，以与设备像素对齐。
在使用em, rem这样的相对单位时, 浏览器计算出来的px很可能不是整数，进而在一些显示设备上出现亚像素渲染问题，比如：圆形变椭圆、图片显示不全有切割、元素之间有缝隙等

浏览器如何计算亚像素
比如，我们在页面上写了一条0.3px的线，那么浏览器的计算值是多少？