css calc 无效 单位 整数 0
今天有群友发现calc(100% - 0)
和calc(100% - 0px)
的显示不一样, 疑惑的是在css中作为属性0=0px=0%
, 为什么会显示不一样呢?
便去查了下, 发现中文区并没有记录原因, 所以在这里介绍下
the + or - operators specifically restrict the operands to be of same type i.e. either length or time or number-tokens.
50% + 0px → Both are of the same type i.e. 'length
50% + 0 → Left is 'length' type and the right is 'integer' type
翻译过来: + 或 - 运算符专门将操作数限制为相同类型,即长度或时间或数字标记。100%
是长度类型, 0
是整数类型, 所以50% + 0 是无效的
也就是说作为单独的属性0,0px,0%等之间是可以相互替换的, 但是在+-操作中0与0px之类是不能等同的