为什么calc()的计算效果无效

html-css017

为什么calc()的计算效果无效,第1张

jquery中的 var a="-webkit-calc(100% - 44px*2)"//注意这里的运算符 - 号前后要有空格，没空格是无效的。//$("#id").height(a)//这句是没用的，因为jquery的height函数，接收的值要求是返回字符串或数字。$("#hh").css({"width":a,"height":a

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

demo：

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

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

demo:

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

demo:

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

demo:

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

demo:(在sass中)

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

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

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

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

在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。