共计 656 个字符，预计需要花费 2 分钟才能阅读完成。
calc() 的定义
用于动态计算长度值可以用在任何长度, 数值, 时间, 角度, 频率等处
calc() 的运算符
+ - ＊ /
width:calc(50% + 15px);
height:calc(100% – 20px);
width:calc(15 * 4px);
height:calc(100% / 4);
⚠️运算符两边需要有空格⚠️使用 * / 运算符时, 必须保证有一个值为数值类型
calc() 使用区分
//1. css 中
width:calc(100% – 20px);
//2. scss 中
$base-font-size: 37.5px;
@function px2rem($px) {
@return ($px / $base-font-size) * 1rem / 2;
}
width:calc(100% – #{px2rem(15px)});
//3. less 中
width:calc(~”100% – 15rem”);
//4. sass 中
width: calc(1rem – 2px);
width: calc((100% – #{$a}*#{$b})/#{$c} );
line-height: calc(1*20/14);
//⚠️sass 中 calc 不能单独识别“/”, 也就是不能单独识别除法，解决这种问题有两种做法：0+ 表达式，或者 1 * 表达式
calc() 应用例子
在移动端/pc 端，会有一屏展示，并局部实现滚动的效果，此时使用 calc() 进行滚动区域高度计算，就可以完美适应所有机型，而不需要再使用 js 动态计算
等分区域或等比区域的页面划分，通常使用弹性盒子，但是 calc() 也可以很好解决这个问题
元素居中问题
