众所周知,CSS有一个特殊的calc()函数,用于做基本的数学运算。
demo:
让我们来详细的学习一下这个功能吧:
calc()函数只能在值中使用。
demo:
也可以在部分属性的内部作为单独的值使用.
demo:
它甚至可以成为构成属性一部分的另一个功能的一部分!例如,这里的calc() 用于渐变的色标中.
demo:
calc() 可以将不同的单位混合在一起 .
demo:(在sass中)
例如:假设我们需要写定一个父盒子的7分之一的宽度的盒子;
calc() 中可以使用加减乘除 , 但他们在使用方法上有所不同。
加法(+)和减法(-)要求这两个数都是长度
除法(/)要求第二个数字是无单位的
比如宽度为父元素的50%加上5像素:width:calc(50% + 5px)
要注意加号(或减号)两边一定要加上空格!
再比如宽度是父元素的三分之一再减去3像素:
width:calc((100% / 3) - 3px)
乘号(或除号)两边可以不加空格,但建议最好加上!
此外必须注意这种方法属于css3标准,不是什么浏览器都适用的哦!