rgb()、hsl()中的数字无单位因其语义明确且规范强制隐含单位；而0可省略单位是css全局语法糖，仅限维度值且无歧义；%是相对运算符而非单位，不可省略或替换。
颜色值本身不是数值，它没有单位可言——所以“不写单位”这个说法本身就错了。真正该问的是：为什么 rgb()、hsl() 里的数字可以不带单位，而 width、margin 的 0 却常被讨论要不要写 px？
rgb() 和 hsl() 里的数字根本不是“带单位的长度”
rgb(255, 0, 128) 中的 255 不是“255 像素”，也不是“255 毫米”；它是红通道的强度值，取值范围是 0–255（整数）或 0%–100%（百分比）。同理，hsl(120, 80%, 60%) 中的 120 是色相角度（单位是 deg），但语法上省略了——因为规范强制规定：当 hsl() 第一个参数是纯数字时，默认单位就是 deg。
这类函数内部的每个参数都有明确的语义类型和隐含单位，不是“随便填个数”，更不是“漏写了单位”。浏览器按函数签名解析，不是按通用数值规则推断。
0 可以不写单位，是因为 CSS 规范特许，且无歧义
这是两个独立机制：0 省略单位是 CSS 全局语法糖，适用于所有接受 <length></length>、<angle></angle>、<time></time> 等维度值（<dimension></dimension>）的属性。原因很实在：
- 0px、0em、0rem、0% 在绝大多数场景下数学等价（都表示“零量”）
- CSS 解析器明确支持
0作为合法的<number></number>直接参与计算，无需补单位 - 只有极少数例外（如
flex-grow: 0不能写成flex-grow: 0px）——因为这里 0 是比例因子，不是长度
所以不是“颜色值不写单位”，而是“0 这个特殊数值，在维度类属性中被允许无单位”——它跟颜色函数无关。
百分比值必须有参照系，但本身不带单位
50% 看起来像“带%单位”，但 % 不是物理单位，它是相对运算符。它的含义完全取决于上下文：
-
width: 50%→ 相对于父元素的width -
font-size: 150%→ 相对于父元素的font-size -
line-height: 1.5（无 %）→ 相对于自身font-size，是无量纲倍数
也就是说，% 是语法标记，不是可省略/可替换的单位。你不能把 50% 写成 50，也不能写成 50px——后者语义彻底改变。这点和 0 的自由省略有本质区别。
真正容易被忽略的是：当你在 rgb() 里混用单位（比如 rgb(50%, 128, 200)），浏览器会拒绝解析——因为规范要求同一函数内各通道必须统一用整数或统一用百分比，不能交叉。这不是单位省略问题，是语法约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
