CSS函数之计算函数calc()

[FrankKai]

• 初识calc()
• calc()语法
• calc()笔记
• calc()常用语法
• 通过margin定位一个对象
• 自动填充容器
• 与CSS变量结合进行计算
• 与整数使用需要注意的
• 兼容性考虑

初识calc()

• 在声明一个CSS属性值时，calc()CSS函数可以对值进行计算
• 值类型可以是<length>,<frequency>,<angle>,<time>,<percentage>,<number>或<integer>

常见calc()demo

width: calc(10px + 100px);
width: calc(100% - 30px);
width: calc(2em * 5);
width: calc(var(--variable-width) + 20px);

calc()语法

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

calc()将一个单表达式作为入参，将表达式的计算结果作为值。
表达式可以是任意的通过运算符连接的表达式，使用标准的运算符优先级：

+
-
* (至少一个是数字)
/ (右侧的是数字)

表达式的操作式可以是任意的<length>
如果需要的话，可以在表达式中为值使用任意的单位。
如果需要的话，可以用圆括号去执行计算。

calc()笔记

• +和-必须有空白包围。calc(50% -8px)被解析为了一个百分比后面跟了一个负的像素值--这是一个无效的表达式--calc(50% - 8px)有效。calc(8px + - 50%)被看做加了一个-50%的值
• *和/运算符不需要空白，但是为了一致性建议添加空格
• 除以0的话会报一个错
• 在自动布局表和固定布局表中，涉及表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式可以被视为已指定了auto
• 在calc()函数中是支持嵌套的，内部的函数被当做简单的括号。

calc()常用语法

calc(<calc-sum>)
<calc-sum> = <calc - product>[[ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value>[ '*' <calc-value> | '/' <number>]*
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

通过margin定位一个对象

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

// banner左右距离均为40px
.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;
}

另一种写法：

width: 100%;
tranform: translateX(-40px);

自动填充容器

帮助确保表单字段适用可用空间，而不超过其容器的边缘，同时保持适当的边距。

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

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

与CSS变量结合进行计算

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

最终计算结果为

.foo {
    --widthA: 100px;
    --widthB: 50px;
    --widthC: 24.984px;
    width: 24.984px;
}

与整数使用需要注意的

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

Chrome下即使是z-index:calc(4 / 2)，都是无效的。

兼容性考虑

相对长度单位。

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

https://developer.mozilla.org/en-US/docs/Web/CSS/calc