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之类是不能等同的

这个是原文链接: https://stackoverflow.com/a/32518348/6489637

posted @ 2022-07-28 11:02  twfb  阅读(114)  评论(0编辑  收藏  举报