css里calculate,calc() ---一个会计算的css属性

最近这个月一直在赶项目开发，遇到的问题和学到的前端知识没有更新到博客园，现在闲了下来，就整理一下前端知识。

在项目开发中，在样式这方面花费的时间较多，因为针对于数字的变化特别多，本人不爱记数字，在看设计图时总是反复计算之间的数值，觉得很麻烦，偶然谷歌一下，发现了css3的一个属性--calc()

calc() 很显然，是calculate的缩写--计算。是css3的一个属性。可以用来给width，height，border，margin以及padding等属性值设置动态值，拿个例子说：

Title

height:200px;background:red;border:1px solid;

}.two{height:100%;padding-left:10px;padding-right:20px;background:pink;width:calc(100% - 10px - 20px);//内容的宽度是170px}.three{height:100%;padding-left:20px;background:aqua;width:calc(100% - 20px);//内容的宽度是150px}

abc