这篇文章需要文法复核。如何帮忙。

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

CSS函数calc()可以用在任何一个需要<length><frequency>, <angle><time><number>、或<integer>的地方。有了calc(),你就可以通过计算来决定一个CSS属性的值了。

你还可以在一个calc()内部嵌套另一个calc(),里面的calc()会被简单地视为加了括号。

语法

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

expression
一个数学表达式,该表达式的结果会作为最终的值。

表达式

该表达式可以使用以下运算符任意组合(使用正常的运算符优先级顺序)。

+
加法
-
减法
*
乘法,乘数中至少要有一个是 <number> 类型的
/
除法,被除数(/右面的数)必须是 <number> 类型的

表达式中的操作数可以使用任意语法种类的长度。如果你愿意,你可以在一个表达式中混用多种不同的长度单位。在需要时,你还可以使用小括号来调整计算顺序。

注:用0作除数会让HTML解析器抛出异常.
注:+和-运算符的两边必须始终要有空白符。比如calc(50% -8px)会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。而calc(8px + -50%)会被解析成为一个长度后跟一个加号再跟一个负百分比。
*和/运算符不需要空白符,但考虑到统一性,仍然推荐加上空白符。
注: Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables MAY be treated as if auto had been specified.

Formal syntax

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创建了一个横跨整个窗口的banner,该banner左右两边各有一个距离窗口边缘40像素的间距:

.banner {
  position:absolute;
  left: 5%;                         /* fallback for browsers without support for calc() */
  left: calc(40px);
  width: 90%;                       /* fallback for browsers without support for calc() */
  width: calc(100% - 80px);  
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}
<div class="banner">This is a banner!</div>

 

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

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

看一下下面的CSS:

input {
  padding: 2px;
  display: block;
  width:  98%;                      /* fallback for browsers without support for calc() */
  width:  calc(100% - 1em);  
}

#formbox {
  width:  130px;                 /* fallback for browsers without support for calc() */
  width:  calc(100% / 6);   
  border: 1px solid black;
  padding: 4px;
}

这个例子中,form元素自身使用了窗口可用宽度的1/6,然后,为了让form元素内部的input元素保持合适的大小,我们再一次使用了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),然后当它被赋值给 .foo 的 width属性 时,所有内部的这些calc()(无论嵌套的有多深)都将会直接被“拍”成一个括号(原文:be flattened to just parentheses),所以这个 width属性 的值就直接相当于 calc( ( 100px / 2) / 2)了,或者说就变成25px了。 简而言之:一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

规范

 

规范 状态 注释
CSS Values and Units Module Level 3
calc()
Candidate Recommendation Initial definition

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 19 -webkit
26
4.0 (2) -moz
16 (16)
9 ? 6 -webkit[1]
7
On gradients' color stops 19 -webkit
26
19 (19) 9 ? 6 -webkit[1]
7
nested calc() 51[2] 48 (48) ? ? ?
Support for <number> values ? 48 (48) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 4.0 (2) -moz
16.0 (16)
? ? 6 -webkit
7
On gradients' color stops ? 19.0 (19) ? ? ?
nested calc() 51[2] 48 (48) ? ? ?
Support for <number> values ? 48 (48) ? ? ?

[1] WebKit 6.0 的实现有些错误。

[2] 点击 bug 600113 

相关链接

文档标签和贡献者

 此页面的贡献者: jdk137, TiaossuP, Prinz_Rana, SphinxKnight, cuixiping, teoli, ziyunfei
 最后编辑者: jdk137,