一、什么是calc()?

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。

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

二、calc()有什么用？

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

三、calc()的语法

calc()语法非常简单，就像我们小时候学加（+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.box{
border:1px solid #ddd;
width:calc(100% - 100px);
background:#9AC8EB;
}

四、calc()的运算规则

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
注意：表达式中不能用"()"。如果有必须拆分。如（100% - 45px）/ 2必须写成 100% / 2 - 45px / 2

五、浏览器的兼容性

　在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()解决此问题更加方便。

【CSS3】css中的数学运算-calc()相关推荐

calc()：css简单的数学运算–加减乘除
calc():css简单的数学运算–加减乘除多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 100px); ...
linux shell数学计算器,技术|使用 GNU bc 在 Linux Shell 中进行数学运算
在 shell 中使用 bc 更好地做算数,它是一种用于高级计算的数学语言. 大多数 POSIX 系统带有 GNU bc,这是一种任意精度的数字处理语言.它的语法类似于 C,但是它也支持交互式执行语句 ...
linux中bc用法英文,使用GNU bc在Linux Shell中进行数学运算
在 shell 中使用 bc 更好地做算数,它是一种用于高级计算的数学语言. 大多数 POSIX 系统带有 GNU bc,这是一种任意精度的数字处理语言.它的语法类似于 C,但是它也支持交互式执行语句 ...
Python中的数学运算操作符使用进阶
原文链接:https://www.jb51.net/article/86988.htm 这篇文章主要介绍了Python中的数学运算操作符使用进阶,也包括运算赋值操作符等基本知识的小结 Python中对 ...
Microsoft Excel 教程：如何在 Excel 中进行数学运算？
欢迎观看 Microsoft Excel 教程,小编带大家学习 Microsoft Excel 的使用技巧,了解如何在 Excel 中进行数学运算,而不是使用计算器.可以输入简单的公式来对两个或多个数 ...
捋一捋Python中的数学运算math库(上篇）
正式的Python专栏第18篇,同学站住,别错过这个从0开始的文章! 很多学习编程的都多多少少学习了一些数学知识. 学委之前也简单吐槽了 Python中奇葩的round函数! 这篇我们讲讲那些常用的数 ...
python中mod运算符_Python中的数学运算操作符使用进阶
Python中对象的行为是由它的类型 (Type) 决定的.所谓类型就是支持某些特定的操作.数字对象在任何编程语言中都是基础元素,支持加.减.乘.除等数学操作. Python的数字对象有整数和浮点数, ...
css简单的数学运算
calc()是css3的一个新增的属性, .box{border:1px solid #ddd; width:calc(100% - 100px); background:#9AC8EB;} 兼容 ...
shell中的数学运算
一.shell中支持的算术算术运算符说明/含义 +.- 加法(或正号).减法(或负号) *./.% 乘法.除法.取余(取模) ** 幂运算 ++.– 自增和自减,可以放在变量的前面也可以放在变量的 ...

【CSS3】css中的数学运算-calc()