CSS3 calc()

什么是calc()?

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

（在使用的时候应当注意运算符前后都应该保留空格，尽管*和/这两个运算符并不需要保留空格，但是为了习惯最好加上。）

 

语法

    除了移动端的浏览器之外，目前大多数的浏览器都对calc()有较好的兼容性，但是依旧要在前面添加前缀，例如：

 

兼容性使用

    在calc()中，我们可以混合绝对单元与相对单元，比如：

 

结合相对于绝对单元的用法

    使用calc()时，计算值是表达式自己，而非表达式的结果，当使用CSS预处理器做数学运算时，给定值为表达式的结果。

 

 

    然后浏览器解析的calc()的值为真实的calc()表达式

 

 

    我们可以使用calc()来实现元素的垂直居中

 

    而典型的解决方法是使用负外边距移动自身距离高与宽的一半

 

 

    实际上calc()还有很多的实际用法，这里只是举一下例，欢迎补充

 

转载于:https://www.cnblogs.com/runhua/p/9566246.html