CSS3计算函数——calc

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，我们可以使用calc函数给任何长的值进行计算。

calc的作用:

在进行页面布局时，尤其是在普遍使用响应式布局的今天，我们更多的不是使用传统的px长度值，而是使用百分比、em、rem等单位值。

在很多时候，我们只知道一个百分值，但其他值又是px之类的值，这就是难点，我们不可能去计算每次百分比的值到底是多少，但随着CSS3的出现，其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便。

语法说明:

calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

来看一个很简单的例子

  <div class="wrapper">
    <div class="content">
    </div>
  </div>

然后我们向其添加CSS

.wrapper {
  width: 300px;
  background: red;
}
.content {
  width: 100%;
  background: yellow;
  height: 50px;
}

这时的效果很简单，content完全遮住了wrapper。

第二步，在content上添加border和padding

这一步很棘手的事情来了，在content上添加10px的内距padding，同时添加5px的border：

.wrapper {
  width: 300px;
  background: red;
}
.content {
  width: 100%;
  background: yellow;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

为了更加清楚直观的发现问题，我给wrapper上下加一个3px的内边距。

.wrapper {
  width: 300px;
  background: red;
  padding: 3px 0;
}
.content {
  width: 100%;
  background: yellow;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

我们发现，content的总长度（width+border+padding)超过了容器wrapper的长度，content出来了。

但是我们给content的width设定为100%是不想让他撑破父容器的，这个时候我们可以给content加个box-sizing，设定为border-box。

但是今天我们不谈这个，我们用calc去实现。

我们知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px），在减去padding的宽度（10px * 2 = 20px），即”100% – (10px + 5px) * 2 = 30px” ，最终得到的值就是content的width值：

.wrapper {
  width: 300px;
  background: red;
  padding: 3px 0;
}
.content {
  background: yellow;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
  width: 90%; /*写给不支持calc()的浏览器*/
  width:-moz-calc(100% - (10px + 5px) * 2);
  width:-webkit-calc(100% - (10px + 5px) * 2);
  width: calc(100% - (10px + 5px) * 2);
}

这样一来，通过calc()计算后，content不在会超出其容器wrapper的宽度.

昨日当年