【css】css中的calc( )

在css中，可以对属性值进行计算：如<length>、<frequency>, <angle>、<time>、<percentage>、<number>、或 <integer>。

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

 

语法：

width:calc(100% - 80px);

在使用less解析中calc运算会忽略单位出现：“width:calc(50% - 5em)” 解析为 “width:calc(45%)”的情况，修改方法：width:calc(~"50% - 5em")

例：加法（+）、减法（-）、乘法（*）：乘数中至少有一个是number、除法（/）：除数必须是number

 

注意要点：

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

 

例子：

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

?

1	<div class="banner">This is a banner!</div

?

1 2 3 4 5 6 7 8 9 10 11

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

 

 2、calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。这个例子中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。

?

1 2 3 4 5 6

form>   <div id="formbox">   <label>Type something:</label>   <input type="text">   </div> </form>

?

1 2 3 4 5 6 7 8 9 10 11

input {   padding: 2px;   display: block;   width: calc(100% - 1em); }   #formbox {   width: calc(100% / 6);   border: 1px solid black;   padding: 4px; }

 

3、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() 就仅仅相当于是一个括号。

 

4、用于控制文本的大小时，可以保证文本的大小会跟随页面一同缩放。

?

1 2 3

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