calc()
CSS
function
lets you perform calculations when specifying CSS property values. It can be used anywhere a
<length>
,
<frequency>
,
<angle>
,
<time>
,
<percentage>
,
<number>
，或
<integer>
is allowed.
/* property: calc(expression) */ width: calc(100% - 80px);
calc()
function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard
operator precedence rules
:
+
Addition.
-
Subtraction.
*
<number>
.
/
<number>
.
The operands in the expression may be any
<length>
syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.
+
and
-
operators
must be surrounded by whitespace
. For instance,
calc(50% -8px)
will be parsed as a percentage followed by a negative length — an invalid expression — while
calc(50% - 8px)
is a percentage followed by a subtraction operator and a length. Likewise,
calc(8px + -50%)
is treated as a length followed by an addition operator and a negative percentage.
*
and
/
operators do not require whitespace, but adding it for consistency is both allowed and recommended.
auto
had been specified.
calc()
functions, in which case the inner ones are treated as simple parentheses.
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> )
When
calc()
is used for controlling text size, be sure that one of the values includes a
relative length unit
, for example:
h1 {
font-size: calc(1.5rem + 3vw);
}
This ensures that text size will scale if the page is zoomed.
When
calc()
is used where an
<integer>
is expected, the value will be rounded to the nearest integer. For example:
.modal {
z-index: calc(3 / 2);
}
This will give
.modal
a final
z-index
value of 2.
注意：
The Chrome browser currently won’t accept some values returned by
calc()
when an integer is expected. This includes any division, even if it results in an integer. ie.
z-index: calc(4 / 2);
will not be accepted.
calc()
makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:
.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;
}
<div class="banner">This is a banner!</div>
Another use case for
calc()
is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
Let's look at some CSS:
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use
calc()
again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:
<form> <div id="formbox"> <label>Type something:</label> <input type="text"> </div> </form>
calc()
with CSS Variables
You can also use
calc()
with
CSS variables
. Consider the following code:
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
After all variables are expanded,
widthC
's value will be
calc( calc( 100px / 2) / 2)
, then when it's assigned to
.foo
's width property, all inner
calc()
s (no matter how deeply nested) will be flattened to just parentheses, so the
width
property's value will be eventually
calc( ( 100px / 2) / 2)
, i.e.
25px
. In short: a
calc()
inside of a
calc()
is identical to just parentheses.
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Values and Units Module Level 3
The definition of 'calc()' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<calc()>
|
Chrome 完整支持 26 | Edge 完整支持 12 |
Firefox
完整支持
16
注意事项
|
IE 完整支持 9 | Opera 完整支持 15 | Safari 完整支持 7 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 28 |
Firefox Android
完整支持
16
注意事项
|
Opera Android 完整支持 14 | Safari iOS 完整支持 7 | Samsung Internet Android 完整支持 1.5 |
<color>
value support
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 59 | IE 不支持 No | Opera 不支持 No | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 59 | Opera Android 不支持 No | Safari iOS 完整支持 6 | Samsung Internet Android 不支持 No |
| Gradient color stops support | Chrome 完整支持 19 | Edge 完整支持 12 | Firefox 完整支持 19 | IE 完整支持 9 | Opera 完整支持 15 | Safari 完整支持 6 | WebView Android 完整支持 37 | Chrome Android 完整支持 28 | Firefox Android 完整支持 19 | Opera Android 完整支持 15 | Safari iOS 完整支持 6 | Samsung Internet Android 完整支持 1.5 |
Nested
calc()
support
|
Chrome 完整支持 51 | Edge 完整支持 16 | Firefox 完整支持 48 | IE 不支持 No | Opera 完整支持 38 | Safari 完整支持 11 | WebView Android 完整支持 51 | Chrome Android 完整支持 51 | Firefox Android 完整支持 48 | Opera Android 完整支持 41 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 5.0 |
<number>
value support
|
Chrome 完整支持 31 | Edge 完整支持 12 | Firefox 完整支持 48 | IE 完整支持 9 | Opera 完整支持 18 | Safari 完整支持 6 | WebView Android 完整支持 4.4.3 | Chrome Android 完整支持 31 | Firefox Android 完整支持 48 | Opera Android 完整支持 18 | Safari iOS 完整支持 6 | Samsung Internet Android 完整支持 2.0 |
完整支持
不支持
见实现注意事项。
要求使用供应商前缀或不同名称。