CSS 中calc()神技

html-css020

CSS 中calc()神技,第1张

众所周知,CSS有一个特殊的calc()函数,用于做基本的数学运算。

demo:

让我们来详细的学习一下这个功能吧:

calc()函数只能在值中使用。

demo:

也可以在部分属性的内部作为单独的值使用.

demo:

它甚至可以成为构成属性一部分的另一个功能的一部分!例如,这里的calc() 用于渐变的色标中.

demo:

calc() 可以将不同的单位混合在一起 .

demo:(在sass中)

例如:假设我们需要写定一个父盒子的7分之一的宽度的盒子;

calc() 中可以使用加减乘除 , 但他们在使用方法上有所不同。

加法(+)和减法(-)要求这两个数都是长度

除法(/)要求第二个数字是无单位的

calc是CSS3中新增的计算属性。

普通的CSS样式时,计算属性的写法如下:

Less中,计算属性的写法如下:

stylus中,计算属性的写法如下: