CSS calc() 函数

使用CSS函数可以在指定CSS属性值时执行计算。它可以在任何地方使用，，，，，，或者是允许的。

句法

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

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

+

加成。

-

减法。

*

乘法。参数中至少一个必须是<number>。

/

师。右侧必须为<number>。

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

笔记

• 在+与-运营商必须用空格包围。例如，calc(50% -8px)将被解析为百分比，然后是负长度（无效的表达式），而解析为百分比后calc(50% - 8px)是减法运算符和长度。同样，calc(8px + -50%)被视为长度，后跟加法运算符和负百分比。
• 在*与/运营商不需要的空白，但增加它的一致性允许和建议。
• 除以零会导致HTML解析器生成错误。
• 自动和固定布局表中涉及表列，表列组，表行，表行组和表单元格的宽度和高度百分比的数学表达式可能会被视为auto已指定。
• 允许嵌套calc()函数，在这种情况下，内部函数被视为简单括号。

形式语法

calc（<calc-sum>）
哪里 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

哪里 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

哪里 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

例子

将对象放在屏幕上并留有边距

calc()可以很容易地以设定的边距定位对象。在此示例中，CSS创建了一个横幅，该横幅跨窗口延伸，横幅的两侧与窗口的边缘之间有40像素的间隙：

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

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

的另一个用例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>

嵌套calc()CSS变量

您还可以使用calc()与CSS变量。考虑以下代码：

.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()s（无论嵌套的深度如何）都将展平为括号，因此该width属性的值最终将为calc( ( 100px / 2) / 2)，即25px。简而言之：a的calc()内部calc()与括号相同。

整数使用

如果calc()在<integer>期望使用的地方使用，则该值将四舍五入到最接近的整数。例如：

.modal {
  z-index: calc(3 / 2);
}

这将使.modal最终的z-index值为2。

注意：calc()  当期望使用整数时，Chrome浏览器当前不接受某些返回的值。这包括任何除法，即使结果为整数也是如此。即。 z-index: calc(4 / 2); 将不被接受。

无障碍问题

当calc()用于控制文本大小时，请确保其中一个值包含相对长度单位，例如：

h1 {
  font-size: calc(1.5rem + 3vw);
}

这样可以确保在缩放页面时可以缩放文本大小。