CSS学习（11）CSS3中的calc函数

前言

• 介绍下CSS的计算属性

CSS3中的calc函数

calc是英文单词calculate(计算)的缩写，是CSS3的一个新增的功能。

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<percentage>、<number>、或 <integer>。

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

可以用常见的 + - * / 符号来进行运算，但需要注意的是 + 和 - 必须用空格隔开，原因很简单，如果-号和计算的数字挨在一起，浏览器在解析时会认为这可能是一个负值。

比如，calc(50% -8px) 会被解析成为一个无效的表达式，解析结果是：一个百分比 后跟一个负数长度值。

参考以下居中的场景

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #ccc;
}

.container .box {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: #000;
}

更对calc参考developer.mozilla.org/zh-CN/docs/…

总结

• 介绍下CSS的计算属性

即calc()函数，主要用于指定元素的长度，支持所有CSS长度单位，运算符前后都需要保留一个空格。

比如:width:calc(100%-50px);