CSS3中的calc()函数以及在less中的使用

1. calc()函数

在CSS3中我们可以通过calc()函数来动态计算长度值，如：

#div {
    width: calc(100% - 100px);
}

它的语法是

calc(expression)

expression参数是必须的，它是一个数学表达式，结果将采用运算后的返回值。

使用calc() 函数时需要注意的点：

• 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);
• 任何长度值都可以使用calc()函数进行计算
• calc()函数支持"+", "-", "*", "/"运算
• calc()函数使用标准的数学运算优先级规则

更详细的介绍见这里：calc()

浏览器的支持情况：

2. 在less中使用calc()函数

如下less定义的两个变量，并使用cal()函数来计算：

@containerHeight: 500px;
@inputHeight: 50px;

.content {
    position: absolute;
    /* 写法1 */
    top: ~"calc(@{containerHeight}/2 - @{inputHeight}/2 + 10px)";
	/* 写法2 */
	top: calc(~"@{containerHeight}/2 - @{inputHeight}/2 + 10px");
}

这里需注意：

• 变量一定要用@{}包裹起来。
• 两种方法中""和~的使用位置。