为什么CSS中的calc函数可能会不生效？ _生活百科

前言在早期如果想要对某一些样式进行动态计算，绝大多数的做法都是使用JavaScript来进行，当时的CSS在面对这种场景显得有点无能为力。但是，当CSS3中新增了calc函数时，面对这种场景， JavaScript不再是我们的第一选择，我们只用 CSS 就可以进行相当复杂的计算了。在使用calc的过程中，相信大家或多或少都遇到过下面这些“坑” 。
如果这篇文章有帮助到你， ?关注+点赞?鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～
常见的“坑”先来介绍css使用calc无效的两种常见情况：
运算符之间没加空格/*错误写法*/div{width: calc(100%-50px);}/*正确写法*/div{width: calc(100% - 50px);}这里错误写法中-两边没加空格，导致width不生效。但并不是所有运算符间都需要加空格，只有 + 和 - 需要加空格，因为运算允许负数的出现，如：
div{width: calc(100% + -50px);}所以，为了统一，建议所有运算符都加上空格，防止记忆混淆。
运算值没带单位我们都知道在写css时，如果数值为0我们一般会省略它的单位，比如：0px我们一般会直接写成0 。但是在calc()函数中如果0不带单位，也会导致不生效。
/*错误写法*/div{width: calc(0 + 100px);}/*正确写法*/div{width: calc(0px + 100px);}这里上面的不带单位的写法也是不生效的。这里我相信很多人都会有疑问，为什么0还需要带个单位？
这是因为calc() 函数传入的是一个数学表达式，而表达式的值可以有多种类型，如长度、百分比、角度等。那如果你传个 0 进去，没单位的话，怎么知道这个 0 是属于什么类型？
低版本less处理calc冲突以下代码在低版本less中会被编译成你意想不到的结果：
.box {width: calc(100% - 50px)}编译后：
.box {width: calc(50%)}导致这个结果的原因在于less中有一套自己的运算规则：
less运算（Operations）算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
【为什么CSS中的calc函数可能会不生效？】// 所有操作数被转换成相同的单位@conversion-1: 5cm + 10mm; // 结果是 6cm@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm// conversion is impossible@incompatible-units: 2 + 5px - 3cm; // 结果是 4px// example with variables@base: 5%;@filler: @base * 2; // 结果是 10%@other: @base + @filler; // 结果是 15%乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
所以上面的less会被进行如下处理：