CSS calc() 使用指南

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)

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

  • 加法 +
calc(50px + 50px)
  • 减法 -
calc(100% - 30px)
  • 除法 /
calc(100% / 2)
  • 乘法
calc(100vh * 2)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

calc(50% -4px)

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

calc(50% - 4px)

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

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

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

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

5. 示例

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

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

你将需要以下的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:#***c
}
 .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-widthheight 上使用它:

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

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

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

结果如下:

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

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

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

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

<div class="container">
  <button class="su***ess">button 1</button> 
  <button class="danger">button2</button>
</div>

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

:root{
  --hue:180;
}
.su***ess{
	background-color: hsl(calc(var(--hue)), 100%, 50%);
}
.danger{
  background-color: hsl(calc(var(--hue) - 180), 100%, 50%);
}

结果如下:

通过给根色调指定一个特定的值,你可以看到我们可以使用 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>

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

  }
}

结果如下:

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

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

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

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

我们还在 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 开发人员工具箱中必不可少的工具。如果你觉得这篇文章有帮助,请点赞加关注,谢谢支持!

转载请说明出处内容投诉
CSS教程_站长资源网 » CSS calc() 使用指南

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买