CSS3的calc()使用

定义：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用于动态计算元素长度值。

语法：

calc(expression)

用处：可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

使用注意事项：

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算，可以混合使用百分比、em、px和rem单位值进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

浏览器兼容性：

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

 

demo如下

#div1 {
    position: absolute;
    left: 50px;
    width: 90%;/*写给不支持calc()的浏览器*/ 
    width: calc(100% - 100px);
    width:-moz-calc(100% - 100px); 
    width:-webkit-calc(100% - 100px); 
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}