所以我研究过，calc()字面上我们可以理解为函数。其实calc是英文单词calculate的缩写，是css3的新函数，用来指定元素的长度。例如，可以使用calc()为元素的边框、边距、填充、字号和宽度等属性设置动态值。为什么是动态值？因为我们使用表达式来获取值。但是calc()更大的优点是用于流体布局，元素的宽度可以通过calc()来计算。

calc()能做什么？

Calc()允许您计算元素。您可以使用百分比、em、px和rem单位值来计算div元素的宽度或高度，例如“Width 3360 Calc (50% 2EM)”，这样您就不必考虑DIV元素的宽度值，而是将这个烦人的任务留给浏览器来计算。

Calc()语法

Calc()语法很简单，就像我们小时候学过的加法()，减法(-)，乘法(*)，除法(/)一样，用数学表达式来表达：

width: calc(表达式)；

其中“表达式”是用于计算表达式长度的表达式。

calc()的操作规则

Calc()使用一般的数学运算规则，但它也提供更智能的功能：

使用四个操作：“”、“-”、“*”和“/”；

可以使用百分比、px、em、rem等单位；

各种单位可以混合计算；

表达式中有" "和"-"时，前后必须有空格。比如“widht: calc(12% 5em)”，写的没有空格，是错误的；

表达式中有“*”和“/”时，前后不能有空格，但建议留空格。

浏览器的兼容性

calc2

举个例子吧。我们制作一个三列并排的模块，宽度为百分比，填充值，边框值和右边距，这三个值是px。

li{

float:left

宽度：33.3333%；

height:50px

padding:10px

margin-right :10 px；

背景# FF6666

border:5px实心# DAC8A7

}

效果图：

calc3

不会绑好的。这种情况下，不容易忘记。就算算出来也有一点误差吧？现在我们使用calc()。

li{

float:left

//width :33.3333%；

height:50px

padding:10px

margin-right :15 px；

背景# FF6666

border:5px实心# DAC8A7

宽度： calc(33.3333%-(10px 5px)* 2-15px)

}

意思是(宽度-(填充边框)* 2-边距)

现在你们可以肩并肩了

calc4