CSS3 calc() 会计算的属性

可用的属性：

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你能够使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。

之前咱们能够使用box-sizing:border-box;来设置盒子的属性为不加上边距。如今咱们又多了一个选择了。但要注意，二者只能使用一个哦，不然就会形成冲突了。

怎么使用

calc()能够使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，并且还能够根据单位如px,em,rem和百分比来转化计算。

示例：

好比三局平均分布的布局，中间间距为5像素。

布局使用

<style>
*{margin: 0; padding: 0;}
.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}
.col-3:nth-child(3){margin-right: 0;}
</style>

兼容性问题