---
title: calc()
slug: Web/CSS/calc()
tags:
  - CSS
  - CSS Function
  - CSS 函数
  - CSS3
  - Calculate
  - Layout
  - calc
translation_of: Web/CSS/calc()
---
<div>{{CSSRef}}</div>

<p>calc() 此 <a href="/zh-CN/docs/Web/CSS">CSS</a> 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：{{cssxref("&lt;length&gt;")}}、{{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}、{{cssxref("&lt;time&gt;")}}、{{cssxref("&lt;percentage&gt;")}}、{{cssxref("&lt;number&gt;")}}、或 {{cssxref("&lt;integer&gt;")}}。</p>

<h2 id="语法">语法</h2>

<pre class="brush: css no-line-numbers notranslate">/* property: calc(expression) */
width: calc(100% - 80px);</pre>

<p>此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。</p>

<dl>
 <dt><code>+</code></dt>
 <dd>加法。</dd>
 <dt><code>-</code></dt>
 <dd>减法。</dd>
 <dt><code>*</code></dt>
 <dd>乘法，乘数中至少有一个是 {{cssxref("&lt;number&gt;")}}。</dd>
 <dt><code>/</code></dt>
 <dd>除法，除数（<code>/</code> 右面的数）必须是 {{cssxref("&lt;number&gt;")}}。</dd>
</dl>

<p>表达式中的运算对象可以使用任意 {{cssxref("&lt;length&gt;")}} 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。</p>

<h3 id="备注">备注</h3>

<ul>
 <li><strong><code>+</code> 和 <code>-</code> 运算符的两边必须要有空白字符。</strong>比如，<code>calc(50% -8px)</code> 会被解析成为一个无效的表达式，解析结果是：一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式 <code>calc(8px + -50%)</code> 会被解析成为：一个长度 后跟一个加号 再跟一个负百分比。</li>
 <li><code>*</code> 和 <code>/</code> 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。</li>
 <li>用 0 作除数会使 HTML 解析器抛出异常。</li>
 <li>涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，<code>auto</code> 可视为已指定。</li>
 <li><code>calc()</code> 函数支持嵌套，但支持的方式是：把被嵌套的 <code>calc()</code> 函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）</li>
</ul>

<h3 id="形式化语法">形式化语法</h3>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="例子">例子</h2>

<h3 id="使用指定的外边距定位一个对象">使用指定的外边距定位一个对象</h3>

<p>使用 <code>calc()</code> 可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中，使用 CSS 创建了一个横跨整个窗口的 banner，该 banner 左右两边各有一个距离窗口边缘 40 像素的间距：</p>

<pre class="brush: css notranslate">.banner {
  position: absolute;
  left: 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;
}
</pre>

<pre class="brush: html notranslate">&lt;div class="banner"&gt;This is a banner!&lt;/div&gt;</pre>

<p>{{EmbedLiveSample('使用指定的外边距定位一个对象', '100%', '60')}}</p>

<h3 id="自动调整表单域的大小以适应其容器的大小">自动调整表单域的大小以适应其容器的大小</h3>

<p><code>calc()</code> 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。</p>

<p>看一下下面的CSS：</p>

<pre class="brush: css notranslate">input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

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

<p>这个例子中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 <code>calc()</code>，让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS：</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div id="formbox"&gt;
  &lt;label&gt;Type something:&lt;/label&gt;
  &lt;input type="text"&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>

<div>{{EmbedLiveSample('自动调整表单域的大小以适应其容器的大小', '100%', '80')}}</div>

<h3 id="使用_CSS_变量嵌套使用_calc">使用 CSS 变量嵌套使用 <code>calc()</code></h3>

<p>我们来看一下下面的代码：</p>

<pre class="notranslate">.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}</pre>

<p>在所有的变量都被展开后，<code>widthC</code> 的值就会变成 <code>calc( calc( 100px / 2) / 2)</code>，然后，当它被赋值给 <code>.foo</code> 的 width 属性时，所有内部的这些 <code>calc()</code>（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 <code>width</code> 属性的值就直接相当于 <code>calc( ( 100px / 2) / 2)</code> 了，或者说就变成 <code>25px</code> 了。 简而言之：一个 <code>calc()</code> 里面的 <code>calc()</code> 就仅仅相当于是一个括号。</p>

<h2 id="无障碍相关考量">无障碍相关考量</h2>

<p>当 <code>calc()</code> 被用于控制文本的长度时，确保值中包含一个<a href="/zh-CN/docs/Web/CSS/length#%E7%9B%B8%E5%AF%B9%E9%95%BF%E5%BA%A6%E5%8D%95%E4%BD%8D">相对长度单位</a>，例如：</p>

<pre class="brush: css notranslate">h1 {
  font-size: calc(1.5rem + 3vw);
}</pre>

<p>这可以保证文本的大小会跟随页面一同缩放。</p>

<ul>
 <li><a href="/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="规范">规范</h2>

<table>
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>初步定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<div>{{Compat("css.types.calc")}}</div>

<h2 id="也可以看看">也可以看看</h2>

<ul>
 <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
</ul>