CSS calc() 使用指南

CSS calc() 使用指南

你听说过或使用过 CSS 的 calc() 函数吗？也许你听说过它，但从未尝试过，或者尝试过使用它，但在使用过程中遇到了一些问题。这篇指南可以帮助你。

CSS calc() 是一个很好的工具，可以帮助你优化你的网页。在本文中，我们将研究 CSS calc() 函数，为什么它很有用，以及如何在项目中使用它。

1. 什么是 CSS calc() 函数？

calc() 函数允许在指定 CSS 属性值时执行计算。它对于计算 length、 percentage、 time、 numbers、integers、frequencies 和 angles 等特别有用。


CSS calc() 函数的一个强大功能是能够组合不同的单位。这个函数可以执行预处理器不能执行的数学计算。

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

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

calc( Expression)
1

calc() 函数接受一个表达式作为参数。然后将表达式的结果用作值。它可以采用任何形式并使用以下任何运算符，遵循标准运算符优先规则。
calc() 函数使用了四个基本运算符:

• 加法 +：

calc(50px + 50px)
1

• 减法 -：

calc(100% - 30px)
1

• 除法 /：

calc(100% / 2)
1

• 乘法

calc(100vh * 2)
1

让我们来看一些使用 CSS calc() 函数的基本示例。然后，我们将探讨关于这个函数需要注意的一些事情，然后我们将深入研究一些更复杂的例子。

2. 使用 calc() 在 CSS 中进行单位转换

使用 CSS calc() 函数，我们可以将一个没有单位的值转换为一个有单位的值，方法是将该值乘以要转换的单位类型。这对 CSS 变量很有用，如下例所示：

.class {
  --fav-num: 3;
  width: calc(var(--fav-num) * 1px); // 3px
}
1
2
3
4

在本例中，我们将数字 3（它没有附加单位）赋值为 CSS 变量 --fav-num。然后我们用它来得到一个新的宽度值，用一个单位乘以 1px 变成 3px。

3. 使用 calc() 转换字体大小

假设有这样一个场景，我们希望段落的字体在桌面屏幕上很大，但在移动屏幕上很小。当然，CSS 媒体查询是可以的，但是 calc() 函数也可以，所以我们不需要使用媒体查询。

让我们看看它是如何实现的：

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(10px + 5vw);
}
1
2
3
4

这将允许我们的字体在移动视图中变小，当我们增加屏幕大小或在桌面视图中恢复正常。

请注意，如果你的字体大小对于桌面视图来说已经很小，则不应该使用这种方法，在这种情况下，让移动视图的字体尺寸更小是没有意义的。

4. 关于 CSS calc() 函数有几点需要注意

现在让我们看看在使用 CSS calc() 函数时需要注意的几件事。

首先，在编写 calc() 函数语法时，必须在每个操作之间包含空格，特别是在使用 + 和 - 操作符时，否则表达式将无效。考虑下面的例子：

calc(50% -4px)
1

上面的表达式无效，因为在运算符和长度之间没有包含空格，使得长度显示为负数。为了纠正这个表达式，我们需要这样写：

calc(50% - 4px)
1

注意，尽管 * 和 / 操作符不需要空格，但包含空格是允许的。因此，为了保持一致性，建议包含空格。

关于 CSS calc() 函数还有一些需要注意的地方：

• 当应用于媒体查询时，它不能工作
• 当除 0 时，HTML 解析器会生成一个错误
• 可以嵌套 calc() 函数

让我们深入研究更多的例子。

5. 示例

5.1 使用 calc() 在 CSS 中调整位置和长度

为了理解如何使用 CSS calc() 函数调整位置和长度，让我们首先制作一些卡片并将它们放入容器中。

你将需要以下的HTML：

<div class="container">
   <div class="card"><p>card 1p>div>
   <div class="card"><p>card2p>div>
   <div class="card"><p>card3p>div>
   <div class="card"><p>card4p>div>
   <div class="card"><p>card4p>div>
div>
1
2
3
4
5
6
7

你的 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结果如下：

你注意到我们的红卡片和灰色容器是不对齐的吗？现在让我们引入 CSS calc() 函数，在我们的卡片的 min-width 和 height 上使用它：

min-width: calc(calc(100% / 5) - 20px);
height: calc(100% - 20px);
1
2

对于 min-width，我们在一个 calc() 函数中嵌套了一个 calc() 函数。嵌套的 CSS 函数用于将屏幕的全宽度（100%）除以 5，然后将结果减去 20px，以得到我们的最小宽度的最终值。

对于我们的高度，我们从 100% 的高度减去顶部和底部 margin 的总值（20px），结果是一个完美对齐的方框。

结果如下：

正如你所看到的，红色卡片现在完美地放置在我们的容器中。

5.2 使用 calc() 函数和 CSS 变量

使用带有 CSS 变量的 calc()，我们可以定义一个值一次，并使用数学方法修改它，以便获得一个对我们有用的新值。让我们看一个例子。

假设我们有两个按钮，每个按钮都有自己的类，像这样：

<div class="container">
  <button class="success">button 1button> 
  <button class="danger">button2button>
div>
1
2
3
4

我们可以使用 CSS 变量定义一种颜色，然后使用 CSS calc() 函数派生另一种颜色。让我们为按钮创建一个颜色变量。我们将使用 hsl 表示，它接受变量（色调，饱和度，亮度）来指定颜色值：

:root{
  --hue:180;
}
.success{
	background-color: hsl(calc(var(--hue)), 100%, 50%);
}
.danger{
  background-color: hsl(calc(var(--hue) - 180), 100%, 50%);
}
1
2
3
4
5
6
7
8
9

结果如下：

通过给根色调指定一个特定的值，你可以看到我们可以使用 hsl 表示法中的 calc() 函数为第二个按钮派生另一种颜色。如果更改根色调的值，则为第二个按钮派生出另一种颜色。

5.3 CSS calc() 应用于动画

当然，我们可以使用 CSS calc() 函数来制作动画。

让我们创建一个示例，从以下 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

我们的 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;

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

结果如下：

正如我们在代码中看到的，CSS calc() 函数在两个方面派上了用场：旋转动画和动画延迟。让我们仔细看看这两个部分。

transform: rotate(calc(18deg * var(--i)));
1

18deg 的值来自 360 度除以我们在 HTML 中创建的块数。然后我们通过用 18deg 乘以变量的值得到变换的旋转值。

animation-delay: calc(0.05s * var(--i));
1

我们还在 animation-delay 中使用了 CSS calc() 函数，将 0.05s 乘以变量。这是用来指定动画开始前的延迟时间。

6. CSS calc() 的浏览器兼容性

虽然 calc() 在 CSS 中是一个有用的函数，但它只有在与我们的浏览器兼容时才有用。看看下面的图表，看看这个功能的浏览器兼容性：

你可以查看 CanIUse 了解更多关于 CSS calc() 函数的浏览器兼容性的详细信息。

7. CSS calc()函数使用场景

很多时候我们需要 CSS calc() 函数来方便地解决一些问题。它们包括：

• 当我们处理 CSS 变量时
• 为了得到一个新的值
• 用于不同单元之间的计算，这是预处理器无法做到的
• 定位
• 调整我们网站的结构和其他元素
• 当我们想避免重复做相同的计算时

我们在本文中介绍的大多数示例都属于上述类别。

8. 小结

使用 CSS calc() 函数的方法有很多。CSS calc() 函数是你应该尝试的。它是 web 开发人员工具箱中必不可少的工具。如果你觉得这篇文章有帮助，请点赞加关注，谢谢支持！