files/zh-cn/web/css/calc()/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

---
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>