若要创建美观的 CSS 布局，首先需要为 Web 应用中放置的所有内容分配大小。一直以来，开发者迫切需要的一项功能是，能够使用各种尺码单位来指定尺寸。例如，如果能够保留 50% 的区域和固定量的空间（例如 10 像素），那就再好不过了。现在，您可以使用 calc() 属性来完成这项工作。您可以在任何使用长度或数字的地方使用此功能，以便将其用于定位对象，或者也用于 rgb() 颜色值，因此它在样式表中拥有很大的作用。
calc() 有什么作用？
calc() 属性可以在样式表中包含 CSS 长度或数量的任何环境中使用。
它提供了两个主要功能，使布局更加灵活：
- 将百分比和绝对值混合使用。
- 使用多种不同的尺寸单位。
将百分比与绝对单位混合
我们来看一个混合使用百分比和绝对单位的示例。假设我们想分配 50% 的可用区域少 50% 的固定像素，那么可以按以下方式编写：
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
如果背景颜色为绿色，应如下所示：
如果缩小父级大小，则如下所示：
这样做的好处在于，我们始终知道内容的右侧边缘将位于包含区域中间左侧 100px 的位置。通过这种方式组合不同的值类型，您的 Web 应用可以处理不同尺寸设备上的布局，并且控制力比以前要好得多。
混合单位
另一个很棒的功能是，能够将具有不同尺寸的单位结合起来，从而得出尺寸。例如，您可以混合使用“em”和“px”单位，以设置相对于当前字体大小的大小。
#bar {
height: calc(10em + 3px);
}
试试看
通过 calc()，您可以使用 +、-、* 和 / 对值进行加减乘除运算，从而允许各种可能性。您可以在可以使用 CSS 长度或数字的任何位置使用 calc()。我们也正努力尽快为角度和频率属性添加 calc()。现在，在 Chrome 19（开发者版）中，可以使用 -webkit-calc 属性指定长度的 calc() 属性；自版本 8 起，在 Firefox 中使用 -moz-calc 属性；在 Internet Explorer（自版本 9 开始）中，无前缀属性。请在下面发表评论，告诉我们你的想法。