calc()语法规则

css计算属性calc()

calc() 只作用于属性值

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

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

不能在媒体查询中使用

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

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

与预处理器数学比较

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

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

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

//(+、-)要求这两个数都是长度
.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);
}

2.可以嵌套

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

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

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

使用例子：
1.元素垂直居中（已知元素尺寸）

// 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);
}

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

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

3.清晰可读

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

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

5.渐变色

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

其他

• 用它创建了一个.full-bleed 实用工具类：.full-bleed{width:100vw；
• margin left:calc（50%-50vw）；}我想calc（）在我的前3个CSS中。
• 用它来为粘性页脚腾出空间。
• 用它来设置一些流体字体/动态排版…根据最小值、最大值和视口单位的变化率来计算字体大小。不仅仅是字体大小，还有行高。
• 如果你使用calc()作为流体字体情况的一部分，涉及到视口单位等，确保你包含一个使用rem或em的单位，这样用户仍然有一些控制权，通过放大或缩小他们需要的字体。
• "内容宽度 "的自定义属性，然后用它来创建我需要的间距，比如 margins: .margin {
  width: calc( (100vw - var(–content-width)) / 2); }
• 用它创建了一个跨浏览器的drop-cap组件。下面是它的一部分。.drop-cap { --drop-cap-lines: 3;
  font-size: calc(1em * var(-drop-cap-lines) * var(-body-line-height));
  }。
• 用它来使文章页面上的一些图片溢出其容器。
• 用它与padding和vw/vh单位相结合，在页面上正确地放置了一个可视化。
• 用它来克服背景-位置的限制，但特别是在渐变中定位颜色停止的限制。比如 “在底部少停0.75em”。