CSS calc()函数的使用

解释

先看一段css样式代码：

.nav{
	/*width:200px;*/
	width: calc(100% - 80px);
}

根据mdn文档解释，calc()是css函数，用于在声明css属性值时执行一些计算。
可以用在如下场合：、、、、、或。

calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。表达式可以是任意 + - * / 操作符的组合并采用标准操作符处理法则的简单表达式。

操作符	场景	使用注意
+	加
-	减
*	乘	乘数中至少要有一个是number类型
/	除	除数必须是number类型

表达式中的操作数客可以使用任意 length 值。可以在表达式中混用这类值的不同单位，同样也可用小括号来建立计算顺序。

注 ：除法计算中，用0作除数会让HTML解析器抛出异常。

注 ：+ 和 - 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。

注 ：* 和 / 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。

注 ：涉及自动和固定布局表中的表列，表列组，表行，表行组和表单元格的宽度和高度百分比的数学表达式可视为已指定auto。

浏览器兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器对早期版本的兼容性不是太好。

目前在使用时，似乎还是需要添加浏览器的前缀：

.main {
/*Firefox*/
	-moz-calc(expression);
	/*chrome safari*/
	-webkit-calc(expression);
	/*Standard */
	calc();	
}

calc使用案例解析

使用指定的外边距定位一个元素

.banner {
    position: absolute;
/* fallback for browsers which still doesn't support for `calc()` */
    left: 5%;
    width: 90%;
/* overwrite, if the browsers support for `calc()`*/
    left: calc(40px);
    width: calc(100% - 80px);
    border: 1px solid black;
    box-shadow: 1px 2px;
    background-color: yellow;
    padding: 6px;
    text-align: center;
}

<div class="banner">This is a banner!</div>

自动调整表单域的大小以适应其容器的大小

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘.

input {
  padding: 2px;
  display: block;
  width:  98%; 
/* fallback for browsers without support for calc() */
  width:  calc(100% - 1em);  
}

#formbox {
  width:  130px; 
/* fallback for browsers without support for calc() */
  width:  calc(100% / 6);   
  border: 1px solid black;
  padding: 4px;
}

这个例子中, form 元素自身使用了窗口可用宽度的1/6,然后,为了让 form 元素内部的input元素保持合适的大小,我们再一次使用了 calc(),让它的宽度为其容器的宽度减1em.下面的HTML使用了上面的CSS:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

使用CSS变量来嵌套calc()

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

在所有的变量都被展开后, widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后当它被赋值给 .foo 的 width属性 时，所有内部的这些calc()（无论嵌套的有多深）都将会直接被“拍”成一个括号（原文：be flattened to just parentheses），所以这个 width属性 的值就直接相当于 calc( ( 100px / 2) / 2)了，或者说就变成25px了。 简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

当calc()被用于控制文本的长度时，确保值包含一个相对长度单位，例如:

h1 {
  font-size: calc(1.5rem + 3vw);
}

这可以保证文本的长度会缩放如果页面缩放。