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(1*20/14);
//⚠️sass中calc 不能單獨識別“/”,也就是不能單獨識別除法，解決這種問題有兩種做法：0+表達式，或者1*表達式

calc( )應用例子

1. 在移動端／pc端，會有一屏展示，並局部實現滾動的效果，此時使用calc( )進行滾動區域高度計算，就可以完美適應所有機型，而不需要再使用js動態計算
2. 等分區域或等比區域的頁面劃分，通常使用彈性盒子，但是calc( )也可以很好解決這個問題
3. 元素居中問題