若要创建漂亮的 CSS 布局，首先要为放置在 Web 应用中的所有内容分配大小。一直以来，用户都希望能够混合使用尺寸单位来指定尺寸，这也是一个备受欢迎的功能。例如，如果能够预留 50% 的区域以及固定数量的空间（例如 10 像素），那就太好了。现在，您可以使用 calc() 属性来实现这一点。您可以在使用长度或数字的任何位置使用此功能，因此您可以将其用于定位内容，也可以在 rgb() 颜色值中使用，因此它在样式表中有很多用途。
如何使用 calc()？
calc() 属性可在样式表中包含 CSS 长度或数字的任何位置使用。
它提供了两个主要功能，可让布局更加灵活：
- 混合使用百分比和绝对值。
- 混用尺寸单位。
将百分比与绝对单位混合使用
我们来看一个将百分比与绝对单位混合的示例。假设我们想分配可用区域的 50%（减去固定数量的像素），则可以这样编写：
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
如果其背景颜色为绿色，则会如下所示：
如果您缩小父级大小，则会如下所示：
这里的好处在于，我们始终知道内容的右侧边缘将位于容器区域中间的左侧 100 像素处。能够以这种方式组合不同的值类型，可让您的 Web 应用在不同尺寸的设备上处理布局，并且控制力比以前大得多。
混合单元
另一个很棒的功能是，您可以将不同测量单位的单位组合起来，以获得最终尺寸。例如，您可以混合使用“em”和“px”单位，以设置相对于当前字号的大小。
#bar {
height: calc(10em + 3px);
}
试试看
借助 calc()，您可以使用 +、-、* 和 / 对值进行加减乘除运算，从而实现各种可能性。您可以在任何可以使用 CSS 长度或数字的地方使用 calc()。我们还将尽快为角度和频率属性添加 calc()。长度 calc() 属性现已在 Chrome 19（开发者渠道 build）中通过使用 -webkit-calc 属性提供，在 Firefox 8 及更高版本中通过使用 -moz-calc 属性提供，在 Internet Explorer 9 及更高版本中不带前缀提供。欢迎在下方留言，告诉我们您的想法。