calc()

calc()

该calc() CSS函数可让您对指定CSS属性值进行计算。它可以在任何存在<length>，<frequency>，<angle>，<time>，<number>，或者<integer>等数据类型的地方使用。

/* property: calc(expression) */
width: calc(100% - 80px

语法

calc()函数将单个表达式作为参数，并将表达式的结果作为输入值。表达式可以是任何使用标准运算符优先级规则的，组合了以下运算符的简单表达式：

+加法。

表达式中的操作数可以是任何<length>语法值。如果您愿意，您可以为表达式中的每个值使用不同的单位。您也可以在需要时使用圆括号来建立计算顺序。

注意：除零会导致HTML解析器生成错误。

注：在+和-运算符必须用空白将其与其他值隔开。例如，calc(50% -8px)将被解析为一个百分比和一个负值长度 —— 一个无效的表达式，而calc(50% - 8px)则表示百分比后跟一个减法运算符和一个长度。同样，calc(8px + -50%)表示一个长度后跟一个加法运算符和一个负的百分比数。

*与/运算符不需要用空白隔开，但为了保持一致性，建议在使用时加上空白。

注意：在自动和固定布局表格中，涉及表格列，表格列组，表格行列，表格行组和表格宽度和高度百分比的数学表达式可能会被视为auto已被指定。

注意：允许嵌套calc()函数，在这种情况下，内部函数被视为简单的圆括号。

形式语法

calc( <calc-sum> )where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

实例

用一个边距在屏幕上定位一个对象

calc()可以很容易地定位具有设定边距的对象。在这个例子中，CSS创建了横跨窗口的横幅，在横幅两侧和窗口边缘之间有40个像素的间隙：

.banner {
  position: absolute;
  left: calc(40px
  width: calc(100% - 80px
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

<div class="banner">This is a banner!</div>

自动调整表单字段的大小以适应其容器

另一个calc()的用例是确保表单字段适合可用空间，而不会挤出容器边缘，同时保持适当的边距。

让我们看看一些CSS：

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em
}

#formbox {
  width: calc(100% / 6
  border: 1px solid black;
  padding: 4px;
}

在这里，窗体本身被建立为使用1/6的可用窗口宽度。然后，为了确保输入字段保持适当的大小，我们calc()再次使用它们应该是他们的容器的宽度减去1em。然后，下面的HTML使用这个CSS：

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

嵌套的带有CSS变量的calc（）

考虑以下代码：

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2
  --widthC: calc(var(--widthB) / 2
  width: var(--widthC
}

当所有的变量都被扩展后，它的widthC值将是calc( calc( 100px / 2) / 2)，那么当它被分配给.foowidth属性的时候，所有内部的calc()（无论多深嵌套）都会被压扁成括号（即进行计算），所以这个width属性的值将会最终为calc( ( 100px / 2) / 2)，也就是说25px。简而言之，a的calc()的内部calc()与括号相同。

规范

浏览器兼容性