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. 元素居中問題