能让前端技术人使用calc属性的，恐怕只有这一个原因

是不是还有人没有听过calc这个功能，或者说知道但从来没有用使用过它的。CSS3新增calc属性其实很简单，适应的场景情况也非常明确，不管怎么，看完这篇文章，你不仅会搞懂calc的使用，更重要的是知道使用calc功能原因只有一种情况：固定值与百分比相遇时。（举一个例子就会全明白）

一、calc的运算规则

1、可以使用+，-，*，/运算

2、可以使用百分比与px、em、rem单位运算

3、+，-时符号前后要有空格，*，/符号可以没有空格

二、举一个例子

【html结构代码】

让父元素div.parent为自适应宽度100%。高度为固定值150px时，来设置子元素的水平和垂直位置。

【css样式代码】

.parent {

width: 100%;

height:150px;

border: solid black 1px;

position: relative;

}

.child {

position: absolute;

left: 0;

height:50px;

top:calc(50% - 25px);

width: calc(100% - 100px);

background-color:red;

text-align: center;

}

重点注意top值和width值的设定。

首先是top值，实现了垂直居中，相当于以下两种处理方式的结果：

一种处理方式：

top：50%

margin-top：-25px

二种处理方式：

transform：translate(0，-50%)

那么区别在哪里呢？很明显看到方便计算和理解且灵活控制，再如上面设置子元素的宽度一样，当父元素宽度是100%时，我希望离右边框100px的距离时，直接通过运算（这种情况一般不借助脚本是不好控制的）。

注意一，如果元素出现magin，padding，border时，只要在表达中顺便相加减就行。而不需要在去倒腾什么box-sizing来改变盒子模型。

注意二，上面px也同样可以换成em等单位，可以自己测试。

三、上面代码的效果

总结一下：

calc的兼容也是可观的，简单点说就是通过表达式计算减少代码复杂度，解决当单位为百分比出现不好计算的问题。当固定值与百分比相遇时，可别忘了还有这个属性。