CSS3 calc() 函数

什么是calc()

• 是一个函数，英文calculate(计算)的缩写，css新增加的功能，用来动态计算长度值

为何为动态值

• 使用表达式得到的值

作用

• 使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值
• 最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度，实现自适应宽度

使用注意事项

• ==运算符(加减乘除)==前后都需要保留一个空格，例如：width: calc(100% - 10px)；

表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格

• 任何长度值都可以使用calc()函数进行计算
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则
• 可以使用百分比、px、em、rem等单位

验证

自适应

随着自适应布局的出现，我们在制作页面的时候，经常会碰到元素的宽度为100%的情况。