你听说过或使用过CSS calc() 功能吗？也许你听说过它，但从未尝试过，或者已经尝试使用它，但在使用过程中遇到了一些问题。本指南可以帮助你解决这个问题。

CSS calc() 是一个帮助你优化网页的好工具。在本教程中，我们将研究CSS calc() 功能，为什么它很有用，以及如何在你的项目中使用它。我们将介绍以下内容。

让我们开始吧。

什么是CSS calc() 函数？

calc() 函数允许你在指定CSS属性值时进行计算。它在 计算长度 、 百分比 、 时间 、 数字 、 整数 、 频率 和 角度 等方面特别有用。

CSS calc() 函数的一个超能力是能够结合不同的单位。这个函数可以进行预处理器无法进行的数学计算。

CSS中的预处理器 只能组合有固定关系的单位，如角度单位、时间单位、频率单位、分辨率单位和特定长度单位。

现在让我们来看看CSS的 calc() 语法：

calc( Expression)
calc() 函数接受一个单一的表达式作为其参数。然后，表达式的结果被用作值。它可以采取任何形式，并使用以下任何运算符，遵循标准运算符优先规则。
calc() 函数使用了四个基本运算符。
加法+ ：
calc(50px + 50px)
减法– ：
calc(100% - 30px)
除法/ ：
calc(100% / 2)
乘法* ：
calc(100vh * 2)
让我们看一下使用CSScalc() 函数的一些基本例子。然后，我们将探讨关于这个函数的一些需要注意的地方，之后我们将深入探讨一些更复杂的例子。
在CSS中使用单位转换的例子calc()
利用CSScalc() 函数，我们可以将一个没有单位的值转换成一个有单位的值，方法是将该值乘以你想转换的单位类型。这对于CSS变量来说是很有用的，就像下面的例子一样：
.class {
  --fav-num: 3;
  width: calc(var(--fav-num) * 1px); // 3px
在这个例子中，我们把没有单位的数字3 赋予了CSS变量--fav-num 。然后我们用它来获得一个新的width ，用它乘以1px ，成为3px 。
转换字体大小的例子calc()
假设我们有这样一种情况：我们希望我们的段落的字体在桌面屏幕上是大的，但在移动屏幕上是小的。当然，CSS媒体查询可以提供帮助，但calc() 函数也等于完成了任务，所以我们不需要使用媒体查询。
让我们来看看它是如何进行的：
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(10px + 5vw);
这将使我们的字体在移动视图中变小，当我们增加屏幕尺寸或在桌面视图中恢复正常。
请注意，如果你的字体在桌面视图中已经很小了，就不应该使用这种方法；在这种情况下，让字体在移动视图中更小就没有意义了。
关于CSScalc() 函数的一些注意事项
现在让我们来看看在使用CSScalc() 函数时需要注意的几件事。
首先，在编写calc() 函数语法时，我们必须在每个操作之间包含一个空格--特别是在使用+ 和– 操作符时--否则我们的表达式将是无效的。考虑一下下面的例子：
calc(50% -4px)
上面的表达式是无效的，因为我们没有在运算符和长度之间加入空格，使长度显示为负数。为了纠正这个表达式，我们需要把它写成以下样子：
calc(50% - 4px)
请注意，尽管* 和/ 操作符不需要空格，但包括空格是允许的。因此，为了保持一致性，建议包括空格。
这里还有一些关于CSScalc() 函数的事情需要注意：
它在应用于媒体查询时不起作用
当你除以0时，HTML解析器会产生一个错误。
calc() 函数有可能被嵌套。
让我们再深入了解一些例子。
调整CSS中的定位和长度的例子calc()
为了了解如何使用CSScalc() 函数来调整定位和长度，让我们先做几张卡片并把它们放在一个容器里。
你将需要以下的HTML：
 <div class="container">
       <div class="card"><p>card 1</p></div>
       <div class="card"><p>card2</p></div>
       <div class="card"><p>card3</p></div>
       <div class="card"><p>card4</p></div>
       <div class="card"><p>card4</p></div>
    </div>
你的CSS代码应该是这样的：
    margin: 0;
   padding: 0;
   box-sizing: border-box;
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
.container{
    position: relative;
    display: flex;
    width: 1000px;
    height: 200px;
    background:#ccc
 .card{
    position: relative; 
    min-width: 200px;
    height: 200px;
    background:#FF0000;
    margin: 10px 10px 10px 10px;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
你是否注意到我们的红色卡片没有与灰色的容器对齐？现在让我们介绍一下CSS的calc() 函数，在我们的卡片内的min-width 和height 上使用：
 min-width: calc(calc(100% / 5) - 20px);
 height: calc(100% - 20px);
对于我们的min-width ，我们将一个calc() 函数嵌套在另一个calc() 函数中。嵌套的CSS函数被用来将屏幕的全部宽度（100% ）除以5 ，然后将结果乘以20px ，得到我们的min-width 的最终值。
对于我们的高度，我们用100%的高度减去上下边距的总值（即20px ），结果是一个完全对齐的盒子。
正如你所看到的，红色卡片现在被完美地放置在我们的容器内
我们还可以以一种偷偷摸摸的方式使用CSScalc() 函数。让我们在下一个例子中看看，我们将探讨在博客样本中使用这个函数的两种情况。
在博客样本中使用CSScalc() 的不同方法
在下一个例子中，我创建了一个简单的博客样本，其中有一个滚动条、一些假的段落和一张图片。我们将用这个样本博客来解释我们可以使用CSScalc() 函数的情况。
要设置我们的博客样本，我们的HTML应该是这样的：
<header>
        <span>home</span>
        <span>about</span>
        <span>contact</span>
      </nav>
    </header>
    <div class="container">
      <div class="blog-container">
        <section class="section">
          Sed ut perspiciatis unde omnis iste natus error sit voluptate
          accusantium doloremque laudantium, totam rem aperiam, eaque 
          ab illo inventore veritatis et quasi architecto beatae vitae 
          dsunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
          aspernatur aut odit aut fugit, sed quia consequuntur magni do
          qui ratione voluptatem sequi nesciunt. Neque porro quisquam e
          dolorem ipsum quia dolor sit amet, consectetur, adipisci veli
          quia non numquam eius modi tempora incidunt ut labore et dolo
          aliquam quaerat voluptatem. Ut enim ad minima veniam, quis n
          exercitationem ullam corporis suscipit laboriosam, nisi ut al
          ea commodi consequatur? Quis autem vel eum iure reprehenderit
          ea voluptate velit esse quam nihil molestiae c onsequatur, ve
          qui dolorem eum fugiat quo voluptas nulla pariatur?
          <img src="https://picsum.photos/200" class="my-image" />
        </section>
        <section>
          Sed ut perspiciatis unde omnis iste natus error sit voluptat
          accusantium doloremque laudantium, totam rem aperiam, eaque i
          ab illo inventore veritatis et quasi architecto beatae vitae 
          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
          aspernatur aut odit aut fugit, sed quia consequuntur magni do
          qui ratione voluptatem sequi nesciunt. Neque porro quisquam e
          dolorem ipsum quia dolor sit amet, consectetur, adipisci veli
          quia non numquam eius modi tempora incidunt ut labore et dolo
          aliquam quaerat voluptatem. Ut enim ad minima veniam, quis n
          exercitationem ullam corporis suscipit laboriosam, nisi ut a
          ea commodi consequatur? Quis autem vel eum iure reprehenderit
          ea voluptate velit esse quam nihil molestiae consequatur, vel
          qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut
        </section>
      </div>
    </div>
我们的CSS代码应该是这样的：
*::before,
*::after{ 
  margin: 0;
  padding: 0;
    box-sizing: border-box;
header{
  width: 100%;
  height: 60px;
  padding: 20px;
  background: #CBC3E3;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  box-sizing: border-box;
.blog-container{
 font-size: 1.5rem;
  max-width: 1000px;
  width: calc(90vw -20px) ;
margin: 20px auto;
  img{
    display: block;
    max-width: 100%;
  padding-top:30px;
现在我们的样本博客已经设置好了，我们可以开始探索CSScalc() 函数的使用案例。
使用CSScalc() 来固定我们的导航条位置
我们在博客上有一个导航条，但正如你在下面看到的，右边的滚动条与它重叠了。
如果我们想把导航条的位置固定下来，使滚动条不与之重叠呢？有多种方法可以实现这个目的，包括使用CSScalc() 函数。
.container{
  height: calc(100vh - 60px) ;
overflow-y: auto;
在上面的代码中，我们在CSS中创建了一个容器选择器，并给它一个100 （整个窗口的视口）的视图高度，然后用它减去标题的高度。除非我们设置一个溢出值，否则我们的改变不会起作用。
使用CSScalc() 来添加一个全宽的图像
假设我们想让博客中的图片填满博客内容两边的空间，而不是停留在博客容器的边距内。同样，我们可以使用CSScalc() 函数来实现这个目的。
.my-image{
  max-width: 100vw;
  width: 100vw;
  margin: 0 calc(-50vw + 50%);
  height: 70vh;
在上面的代码中，我们将顶部和底部的边距设置为0 。然而，在左边和右边，我们做了一些不寻常的事情：我们用calc() 函数给它一个负的视口宽度（- 50vw ），然后再把50%加进去。
结果，我们的图像就填满了整个视口。尽管它和我们的部分被放置在同一个容器中，但我们的图像现在占据了屏幕的全部宽度。
使用CSS变量的calc() 函数的例子
将calc() 与CSS变量一起使用，我们可以先定义一个值，然后用数学方法对其进行修改，以得到一个对我们有用的新值。让我们来看看一个例子。
假设我们有两个按钮，每个都有自己的类，像这样：
 <div class="container">
   <button class="success">button 1</button> 
   <button class="danger">button2</button>
我们可以用一个CSS变量来定义一种颜色，然后用CSS的calc() 函数来推导出另一种颜色。让我们为我们的按钮创建一个颜色变量。我们将使用hsl 符号，它以变量(hue, saturation, lightness) 来指定一个颜色值。
:root{
    --hue:180;
.success{
 background-color: hsl(calc(var(--hue)), 100%, 50%);
.danger{
    background-color: hsl(calc(var(--hue) - 180), 100%, 50%);
通过给我们的根色调一个特定的值，你可以看到我们可以在我们的hsl 符号里面使用calc() 函数来为第二个按钮推导出另一种颜色。如果我们改变根色相的值，第二个按钮就会产生另一种颜色。
我们可以使用CSScalc() 来制作动画吗？
我们当然可以使用CSScalc() 函数来制作动画。让我们来创造一个例子!从下面的HTML开始。
<section>
      <div class="animate-loading">
        <div class="block" style="--i: 1"></div>
        <div class="block" style="--i: 2"></div>
        <div class="block" style="--i: 3"></div>
        <div class="block" style="--i: 4"></div>
        <div class="block" style="--i: 5"></div>
        <div class="block" style="--i: 6"></div>
        <div class="block" style="--i: 7"></div>
        <div class="block" style="--i: 8"></div>
        <div class="block" style="--i: 9"></div>
        <div class="block" style="--i: 10"></div>
        <div class="block" style="--i: 11"></div>
        <div class="block" style="--i: 12"></div>
        <div class="block" style="--i: 13"></div>
        <div class="block" style="--i: 14"></div>
        <div class="block" style="--i: 15"></div>
        <div class="block" style="--i: 16"></div>
        <div class="block" style="--i: 17"></div>
        <div class="block" style="--i: 18"></div>
        <div class="block" style="--i: 19"></div>
        <div class="block" style="--i: 20"></div>
      </div>
    </section>
我们的CSS应该看起来像这样：
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #001d10;
.animate-loading{
     position: relative;
     width: 250px;
     height: 250px;
.animate-loading .block{
    position: absolute;
    width: 8px;
    height: 25px;
    background: #050c09;
    left: 50%;
    border-radius: 8px;
    transform: rotate(calc(18deg * var(--i)));
    transform-origin: 0 125px ;
    animation: animate 1.9s ease-in-out infinite;
    animation-delay: calc(0.05s * var(--i));
@keyframes animate {
    0%,50%{
         background: #050c09;
         box-shadow: none;
    50.1%,100%{
        background: #38d2dd;
        box-shadow: 0 0 5px #38d2dd,
                    0 0 15px #38d2dd,
                    0 0 30px #38d2dd,
                    0 0 60px #38d2dd,
                    0 0 90px #38d2dd;
正如我们在代码中看到的，CSScalc() 函数在两个方面派上了用场：为我们的旋转制作动画，同时也为我们的动画延迟制作动画。让我们仔细看一下这两个方面。
transform: rotate(calc(18deg * var(--i)));
18deg 的值来自于用360度除以我们在HTML中创建的块的数量。然后，我们通过用18deg 乘以我们的变量值，得到我们的transform 的旋转值。
animation-delay: calc(0.05s * var(--i));
我们还在我们的animation-delay 中使用了CSS的calc() 函数，用我们的变量乘以0.05s 。这被用来指定我们的动画开始前的延迟。
浏览器的兼容性CSS calc()
虽然calc() 是CSS中一个有用的函数，但它只有在与我们的浏览器兼容时才有用。请看下面的图表，看看这个函数的浏览器兼容性。
你可以查看CanIUse，了解关于CSScalc() 函数的浏览器兼容性的更多细节。
你应该在什么时候使用CSScalc() 函数？
有很多时候，我们会需要CSScalc() 函数来拯救我们。它们包括
当我们在处理CSS变量的时候
用于导出一个新的值
用于不同单位之间的计算，这是预处理器无法做到的。
用于调整我们网站的结构和其他元素
当我们想避免重复进行相同的计算时
我们在本文中所涉及的大多数例子都属于上述类别。
我们有很多方法可以使用CSScalc() 函数。你甚至还可以想出你的用例。CSScalc() 函数确实是你应该尝试的东西。它是网络开发者工具箱中的一个重要工具。
如果你觉得这篇文章有帮助，请分享它