CSS3的calc()使用

前言

平时在制作页面的时候，总会碰到有的元素是100%的宽度。如果元素宽度为100%时，如果改变了默认的盒模型，那就有可能导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。这样一来就会相当的麻烦，平时我们碰到这样的现象时，也是相当的谨慎，有时甚至无法解决，只能通过改变结构来实现。就算通过繁琐的方法实现了，但有于浏览器的兼容性而导致最终效果不一致。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题，其实今天的calc()函数功能实现上面的效果来得更简单。

什么是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()语法非常简单，就像加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.elm {
 width: calc(expression);
}

其中”expression”是一个表达式，用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：

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

浏览器的兼容性

目前大部分浏览器都已支持该属性，比较老的浏览器还是要加上浏览器前缀

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

案例

<!--html-->
<div class="main">
   <div class="box"></div>
</div>

/*css*/
.main {
   width: 300px;
   background-color: royalblue;
   border: 5px solid black;
}
.box {
   height: 80px;
   width: 100%;
   padding: 20px;
   border: 2px solid red;
   background-color: purple;
}

效果如图：

对css改进：

 /*css*/
 .main {
   width: 300px;
   background-color: royalblue;
   border: 5px solid black;
 }
 .box {
   height: 80px;
   width: -moz-calc(100% - (20px + 5px) * 2);
   width: -webkit-calc(100% - (20px + 5px) * 2);
   width: calc(100% - (20px + 5px) * 2);
   padding: 20px;
   border: 5px solid red;
   background-color: purple;
 }

效果如图：