CSS calc() 函数

Calc()是一个CSS函数，它允许您在您的CSS中直接计算值。例如：

1.pirate {
2  position: absolute;
3  /* lets have the pirate 20px from the left */
4  left: calc(50px - 30px);
5}

乍一看，你可能会想，我到底为什么要关心这个？我可以将其设置为20px。当你意识到你可以混合和匹配这些单位时，事情就变得有趣了：

1left: calc(1.5em - 8px);

当你混合百分比值的时候，事情会变得更加有趣。下面将所选元素的宽度设置为小于100%的80px：

1width: calc(100% - 80px);

请确保在操作对象周围使用空格。例如：v1+v2，而不是v1+v2或v1+v2。

你可以在任何需要使用数值的地方使用calc（)（例如：width，max-height，margin-left，.)

Calc()对于垂直centering，如果您知道要居中的元素的高度，则非常有用。您只需将50%的视区高度减去一半的元素高度添加到元素的上边距。假设我们的元素是100px高：

1.my-element {
2  display:block;
3  margin-left:auto;
4  margin-right:auto;
5  /* 50vh = 50% viewport height */
6  margin-top: calc( 50vh - 50px );
7  width: 200px;
8  height: 50px;
9}

浏览器支持

[Can I Use Calc？](有关Caniuse.com上主要浏览器对Calc功能的支持的http://caniuse.com/# feat=calc)数据。