css3 中的calc用法

定义与用法

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);      
 }

下面转自http://caibaojian.com/css3-calc-vw.html

calc实现滚动条出现页面不跳动

100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

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

测试连接http://www.zhangxinxu.com/study/201501/body-scrollbar-no-jump.html?utm_source=caibaojian.com