定義與用法

calc() 函式用於動態計算長度值。

1.需要注意的是，運算子前後 都需要保留一個空格，例如：width: calc(100% - 10px)；
2.任何長度值都可以使用calc()函式進行計算；
3.calc()函式支援 “+”, “-“, “*”, “/” 運算；
4.calc()函式使用標準的數學運算優先順序規則；
calc是css3中的計算，IE10+瀏覽器支援，IE9瀏覽器基本支援(不能用在background-position上)；

///防止不支援，可以加瀏覽器字首
 .element {
   -moz-calc(expression);
   -webkit-calc
 
(expression); 
   -o-calc(expression);
   -ms-calc(expression);
   calc(expression);      
 }

calc實現滾動條出現頁面不跳動

100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。
於是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被佔用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！

.wrap-outer {
    padding-left
 
: calc(100vw - 100%);
}
///或者下面這樣
.wrap-outer {
    margin-left: calc(100vw - 100%);
}