现代 CSS 解决方案:CSS 数学函数
在 CSS 中,其实存在各种各样的函数。具体分为:
Transform functions
Math functions
Filter functions
Color functions
Image functions
Counter functions
Font functions
Shape functions
Reference functions
CSS grid functions
本文,将具体介绍其中的 CSS 数学函数(Math functions)中,已经被浏览器大规模支持
的 4 个:
calc()
min()
max()
clamp()
为什么说是被浏览器大规模支持的?因为除了这 4 个目前已经得到大规模支持的数学函
数外,其实规范 CSS Values and Units Module Level 4 已经定义了诸如三角函数相关 sin()、
cos()、tan() 等,指数函数相关 pow()、sqrt() 等等数学函数,只是目前都处于实验室阶段,
还没有浏览器支持它们,需要给时间一点时间。
Calc()
calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。
语法类似于
{
width: calc(100% - 80px);
}
一些需要注意的点:
+ 和 - 运算符的两边必须要有空白字符。比如,calc(50% -8px) 会被解析成为一个无效
的表达式,必须写成 calc(8px + -50%)