calc() 是一个 CSS 函数，可让您直接在 CSS 中计算值。例如：
.main-content {
width: calc(100% - 40px);
}此功能最有用的功能之一是您可以混合多个 CSS 单位使用。在我们的示例中，我们使用了像素百分比，当然我们也可以使用 em、pt、rem 等。
我发现90%情况都是使用减号的calc，其实还可以使用这些：
- 加号使用 +
- 减号使用 -
- 乘号使用 *
- 除号使用 /
运算符必须用空格隔开。如果前后没有空格，一些运算将会出现问题。
// use this code
.logo {
height: calc(4rem - 30px);
}
// instead of this one
.logo {
height: calc(4rem-30px);
}所有主要浏览器都支持它 https://caniuse.com/#feat=calc。
将 calc() 与 CSS 变量和 SASS 一起使用
它使用新的 CSS 变量开箱即用：
--text-input-width: 500px;
max-width: calc(var(--text-input-width) / 2);在 SASS 或 SCSS 中使用 calc()
对于 SASS 变量，您必须在 calc() 函数中插入值：
$body_padding}: 20px;
height: calc(100% - #{$body_padding})
相关推荐
-
css里首行缩进2字符怎么设置（首行缩进2字符css代码）
1、首先打开Notepad++软件，新建一个空文件 2、输入下图所示内容： 3、点击左上角的文件会出现下图所示界面点击保存 4、点击后会出现下图界面，文件名为css.html，这里CSS只是一个示例，其实只需要扩展名使用.htm或....
-
css图片透明度怎么设置（css透明属性）
1、新建html文档，在body标签中添加一个img标签，这时默认情况下图片是不透明的。 2、在head标签中添加style标签，在style标签中为img标签设置透明度样式，其中三个属性是为了兼容不同浏览器。 3、刷新浏览器中的页...
-
只会html和css能不能找到工作（只会html css js能找工作吗）
作为过来人说几句吧，去年七月份来到厦门开始实习生涯，作为一个通信工程专业的大四学生，又对通信岗位不感兴趣，在大三下学期的时候学会了html css以及js，技术水平自己觉得找个实习还是没问题的吧，能独立完成页面...
-
如何在 CSS 中使用 currentColor 值
在 CSS 中，我们有一个名为 currentColor 的特殊颜色值，可能大多数人都不知道。 currentColor 所做的是获取颜色属性的值并将其用于任何其他具有颜色参数的属性。 例如以下内容： 下面currentColor写法与上面效果一...
-
在动画期间隐藏滚动条
CSS 仍然无法为自动尺寸auto设置动画。 但可以尝试使用 JavaScript 技巧来实现，Brandon Smith 不久前概述了这种方法。不过我总是想到这个解决方案，因为它太简单了： 另一个问题是滚动条。 当我们设置 max-height: ...
-
css怎么设置字体加粗（css设置字体粗细）
1、首先就是打开Sublime Text编辑器，新建一个HTML页面，并添加HTML结构，如下图所示 2、然后在body区域添加字体，注意放在一个div里面，如下图所示 3、接下来就可以在CSS中用font-weight进行加粗设置了，只需要设置...
