数学函数

calc()

允许在声明 CSS 属性值时执行一些计算

加减乘除

• 加减法两边的操作数都是需要单位的，乘除法需要一个无单位数，表示倍率
• 加减号两边必须有空白字符，乘除号两个不需要有空白字符，但考虑到统一性，还是推荐加上空白字符

{
    width: calc(1rem + 10px);
    height: clac(100px / 2);
}

嵌套

calc() 函数是可以嵌套使用的

{
    width: calc(100vw - calc(100% - 64px));
}

内部的 calc() 函数可以退化写成一个括号即可 ()

{
    width: calc(100vw - (100% - 64px));
}

支持不同单位的混合计算

• px
• %
• em
• rem
• in
• mm
• cm
• pt
• pc
• ex
• ch
• vh
• vw
• vmin
• vmax

可搭配 css3 变量使用

min()、max()、clamp()

• max()：从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值
• min()：从一个逗号分隔的表达式列表中选择最小的值作为属性的值
• clamp()：把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用，它接收三个参数：最小值、首选值、最大值

min、max

希望一个块，随屏幕变宽而变宽，但宽度至少有 500px

{
    width: max(100%, 500px)
}

希望一个块，随屏幕变宽而变宽，但宽度至多只有 500px

{
    width: max(100%, 500px)
}

希望一个块，宽度在 500px ~ 700px 之间随屏幕变宽而变宽

{
    width: clamp(500px, 100%, 700px)
}