calc() -css3新属性 | 易学教程

calc()看起来像个js的函数，但它实际上是css3的一个属性，它能自动计划宽度，高度等。

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

calc()能做什么？

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

calc()语法

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

.elm {
  width: calc(expression);
}

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

calc()的运算规则

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

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

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

大家在实际使用时，同样需要添加浏览器的前缀

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

<div class="box">
    <div class="inner"></div>
</div>

.box{width:400px;}
.inner{
    padding: 20px;
    border: 1px solid #999;
    width:90%;/*不支持属性的浏览器**/
    width:-moz-calc(100% - 20*2 + 1*2); /**20是padding值，1是边框的值**/
    width:-webkit-calc(100% - (20 + 1) * 2);
    width:calc(100% - (20 + 1) * 2);
}

来源：https://www.cnblogs.com/lch880/p/3964680.html

标签

calc

css