CSS 布局通过 calc() 变得更加智能

Alex Danilo

若要创建美观的 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 开始)中,无前缀属性。请在下面发表评论,告诉我们你的想法。