calc()从字面上可以把它理解成为一个函数function，英文单词是calculate（计算），是CSS3的一个新功能，用来显示元素的长度。
他的用途就是，如果你有一个元素，加了padding或者border就超出了原来预想的效果，或者把元素盒子撑破，这时我们就可以用calc()了,
注意：
1、任何长度值都可以使用calc()函数进行计算；
2、 calc()函数支持 "+", "-", "*", "/" 运算；
3、 calc()函数使用标准的数学运算优先级规则；
具体用法也很简单：
.box{width: calc(100%-30px);padding-top: 30px;background-color: lightskyblue;}
只是现在只有PC的浏览器可以兼容，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支，在移动端除了firefox for android 14.0，是没有其他的可以兼容的。
-----------------------------------------------------我是分割线------------------------------------------------------
但是如果你想解决padding或者border造成的额问题，可以给元素加上box-sizing：border-box；这样元素还是原来的大小。不会被撑破。
原文：http://www.cnblogs.com/eyed/p/7921604.html