css 使用 calc() 无效的两种常见情况


第一种

运算符间没加空格,如

/*错误示例*/
div{
      width: calc(100%-10px);
}
/*正确写法*/
div{
      width: calc(100% - 10px);
}

为什么要加空格?其实不是所有运算符间都需要加空格,只有 +- 需要加空格,因为运算允许负数的出现,如

div{
       width: calc(100% + -10px);
}

所以,为了统一,/* 最好都带上空格。

第二种

运算值不带单位,如

/*错误写法*/
div{
      width: calc(0 + 10px);
}
/*正确写法*/
div{
      width: calc(0px + 10px);
}

看到这里,你可能会疑问,为啥 0 还要带个单位呢?其实,calc() 函数传入的是一个数学表达式,而表达式的值可以有多种类型,如长度、百分比、角度等,
那如果你传个 0 进去,没单位的话,怎么知道这个 0 是属于什么类型呢?

参考


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM