calc()用法

57 阅读 0 评论 38 点赞

我是靠谱客的博主现代心情，最近开发中收集的这篇文章主要介绍calc()用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、calc()是css3的一个新增的功能，用来指定元素的长度，你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。

2、calc()语法

.element {
  width：calc(expression);  
}

3、calc()的运算法则

　　1）、使用 "+"、"-"、"*" 和 "/" 运算

　　2）、可以使用百分比、px、em、rem等单位运算

　　3）、可以混合使用各种单位进行运算

　　4）、表达式中有 "+" 和 "-" 时，其前后必须有空格。

　　5）、表达式中有 "*" 和 "/" 时，其前后可以没有空格，但建议保留

4、浏览器的兼容性

　　在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持，使用时同样在其前面加上各浏览器厂商的识别符前缀

.element {
  -moz-calc(expression);
  -webkit-calc(expression); 
  -o-calc(expression);
  -ms-calc(expression);
  calc(expression);      
}

5、应用

　　众所周知，如果元素的宽度为100%时，其自身不带其它盒模型属性设置还好，如果有别的类似margin、padding或border的属性设置，那将导致盒子被撑破。为了解决撑破容器的问题，以前我们只能计算div.box的宽度，用容器的宽度减去padding和border的值，但有时候我们苦于不知道元素的总宽度，比如说是自适应布局，只知道一个百分比值，但其它的值又是*px之类的值，这就比较难解决了。随着css3的出现，其中利用box-sizing来改变元素的盒模型以达到最终想要的效果，但是calc()解决此问题更加方便。

转自：https://www.cnblogs.com/wangchunlin/p/6782419.html 稍作修改