calc()语法规则

1、calc()中的参数是一个计算公式

这个计算公式把计算宽度和数值的任务扔给不同尺寸下的浏览器，让页面能够自己得出宽度或数值的结论，这些计算公式也都是很简单的加( )减( - )乘( * )除( / )运算。

div{
    width: calc(15px   15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px
}

• 加( )减( - )运算中需要计算的数值与运算符之间是有空格的
• 可以使用百分比、px、em、rem等单位进行计算的，并且单位可以混在一起计算：

div{
    width: calc(3em   5px);//53px
}

支持"+", “-”, “*”, "/"四则运算，又有区别

//(+、-)要求这两个数都是长度
.foot {
 /* 有效 */
 margin: calc(100px + 100px);
 
  /* 无效 */
 margin: calc(10px + 5);
}
//除法(/)要求第二个数字是无单位的
.foot {
 /* 有效的? */
 margin: calc(30px / 3);

 /* 无效的? */
 margin: calc(30px / 10px);

 /* 无效的?  (不能除以0) */
 margin: calc(30px / 0);
}
//乘法(*)要求其中一个数是无单位的。
.foot {
 /* 有效的 ? */
 margin: calc(10px * 3);

 /* 有效的 ? */
 margin: calc(3 * 10px);

 /* 无效的 ? */
 margin: calc(30px * 3px);
}
//加法和减法要加前后空格
//负数是可以的(例如 calc(5vw - -5px) )，但这是一个例子，说明空格不仅是必需的，而且是有用的
.foot {
 /* 有效的 ? */
 font-size: calc(3vw + 2px);

 /* 无效的 ? */
 font-size: calc(3vw+2px);

 /* 有效的 ? */
 font-size: calc(3vw - 2px);

 /* 无效的 ? */
 font-size: calc(3vw-2px);
}
//calc() 与开头括号之间没有空格。
.foot {
 /* 无效的 ? */
 width: calc (100% / 3);
}

CSS有很多长度，它们都可以与calc() 一起使用：

px % em rem in mm cm pt pc ex ch vh vw vmin vmax

二、calc()嵌套

calc()是一个函数，那么函数是可以支持嵌套的，可以通过不同的公式来算出最后的结果。

div{
    --widthA: calc(10px   190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}

.foot {
   width: calc( 100% / calc(100px * 2) );
}

三、不能在媒体查询中使用

@media (max-width: 40rem) {
  /* Narrower or exactly 40rem */
}

/* 无效 */
@media (min-width: calc(40rem + 1px)) {
  /* Wider than 40rem */
}

四、支持大多数浏览器，对于不支持的可以写后补；

.foo {
   width: 90%; /* 浏览器不支持是启用*/
   width: calc(100% - 50px);
}

五、元素垂直居中（已知元素尺寸）

// foot的元素宽高均为300px
.foot {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}
//calc()写法
.foot {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

六、渐变色

.foot {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}

七、CSS自定义属性和calc()

html {
  --spacing: 10px;
  --spacing-L: var(--spacing) * 2;
  --spacing-XL: var(--spacing) * 3;
}

.module[data-spacing="XL"] {
  padding: calc(var(--spacing-XL));
}

<div style="--index: 1;"> ... </div>
<div style="--index: 2;"> ... </div>
<div style="--index: 3;"> ... </div>
div {
  /* Index value comes from the HTML (with a fallback) */
  animation-delay: calc(var(--index, 1) * 0.2s);
}

八、清晰可读

//更加清晰可读
.foot {
    width: 16.666666667%;
}
.foot {
    width: calc(100% / 6);
}

九、创建根栅格尺寸（ 1rem 宽度的元素总是视口元素宽度的 1/30）

html {  
    font-size: calc(100vw / 30);
}

十、与预处理器数学比较

.foot {
  width: calc(10px + 50px);
}
//组合不同单元; .foot元素总是小于它父元素宽度 50px;
//使用 calc()，计算值是表达式它自己，而非表达式的结果
.foot {
    width: calc(100% - 50px);
}

//  SCSS 等同于 width: 150px;
//当使用 CSS 预处理器做数学运算时，给定值为表达式的结果。
.foot {
    width: 100px + 50px;
}