calc

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(120/14);//⚠️sass中calc 不能单独识别“/”,也就是不能单独识别除法，解决这种问题有两种做法：0+表达式，或者1*表达式calc( )应用例子在移动端／pc端，会有一屏展示，并局部实现滚动的效果，此时使用calc( )进行滚动区域高度计算，就可以完美适应所有机型，而不需要再使用js动态计算等分区域或等比区域的页面划分，通常使用弹性盒子，但是calc( )也可以很好解决这个问题元素居中问题