css3 中的calc用法

柔光的暖阳◎ 2022-05-21 04:23 259阅读 0赞

### 定义与用法 ###

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][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][http_www.zhangxinxu.com_study_201501_body-scrollbar-no-jump.html_utm_source_caibaojian.com]

[http_caibaojian.com_css3-calc-vw.html]: http://caibaojian.com/css3-calc-vw.html
[http_www.zhangxinxu.com_study_201501_body-scrollbar-no-jump.html_utm_source_caibaojian.com]: http://www.zhangxinxu.com/study/201501/body-scrollbar-no-jump.html?utm_source=caibaojian.com