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

最后

以上就是动听眼神为你收集整理的CSS3的calc()使用的全部内容，希望文章能够帮你解决CSS3的calc()使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。