calc()函数定义与用法 使用场景 和注意事项 宽度高度计算长度值

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。

一、定义与用法

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；
• 在需要时，你还可以使用小括号来建立计算顺序。

•  height: calc(100vh - 114px);
   line-height: calc(100vh - 114px);

使用 calc() 可以很容易

的为一个对象设置一个左右两边相等的外边距。在这个例子中，使用 CSS 创建了一个横跨整个窗口的 banner，该 banner 左右两边各有一个距离窗口边缘 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;
}

<