众所周知，CSS有一个特殊的calc()函数，用于做基本的数学运算。
demo：
.main-content {
/* 盒子的高度是100vh-80px */
height: calc(100vh - 80px);
}
让我们来详细的学习一下这个功能吧:
一, calc() 的作用范围;
calc()函数只能在值中使用。
demo:
.el {
font-size: calc(3vw + 2px);
width: calc(100% - 20px);
height: calc(100vh - 20px);
padding: calc(1vw + 5px);
}
也可以在部分属性的内部作为单独的值使用.
demo:
.el {
margin: 10px calc(2vw + 5px);
border-radius: 15px calc(15px / 3) 4px 2px;
transition: transform calc(1s - 120ms);
}
它甚至可以成为构成属性一部分的另一个功能的一部分！例如，这里的calc() 用于渐变的色标中.
demo:
.el {
background: #1E88E5 linear-gradient(
to bottom,
#1E88E5,
#1E88E5 calc(50% - 10px),
#3949AB calc(50% + 10px),
#3949AB
);
}
二, calc() 的单位要求;
calc() 可以将不同的单位混合在一起 .
width: calc(100% - 20px);
Tips:在sass中想同时使用calc()和变量以下写法是不可行的; 同时 , calc()不能在媒体查询中使用;
demo:(在sass中)
$padding: 1rem;
.el[data-padding="extra"] {
padding: $padding + 2rem; // processes to 3rem;
margin-bottom: $padding * 2; // processes to 2rem;
}
三, calc() 具有更强的语义;
例如：假设我们需要写定一个父盒子的7分之一的宽度的盒子；
.el {
/* 更加语义化和容易理解 */
width: calc(100% / 7);
/* 这种看起来更冗杂 */
width: 14.2857142857%;
}
三, calc() 的运算符合和要求;
calc() 中可以使用加减乘除 , 但他们在使用方法上有所不同。
加法(+)和减法(-)要求这两个数都是长度
.el {
/* 有效👍 */
margin: calc(10px + 10px);
/* 无效的👎 */
margin: calc(10px + 5);
}
除法(/)要求第二个数字是无单位的
.el {
/* 有效的👍 */
margin: calc(30px / 3);
/* 无效的👎 */
margin: calc(30px / 10px);
/* 无效的👎 (不能除以0) */
margin: calc(30px / 0);
}
总结：在编写CSS中calc() 还是非常常用的 ，多多使用就能熟练掌握啦~
