calc 计算属性

calc 这个属性可以达到什么效果呢？通过计算函数，可以在 不刷新浏览器 的情况下，实时的让属性值发生变化，我们一起看看 calc 的使用吧。

1. 官方定义

calc() 函数用于动态计算长度值。

2. 慕课解释

• calc()可以按照我们写的公式，在浏览器中进行计算，使用的时候，要注意： 运算符 的前后都需要保留一个 空格 ，例如：width: calc(100% - 20px)； 中，- 号前后要有一空格。
• 它支持 “+”， “-”，“*”，“/” 运算；
• calc() 函数使用标准的数学运算优先级规则。

3. 语法

.demo{
    /* property: calc(expression) */
    width: calc(100% - 80px);
}

解释：demo 的宽度 = 父元素总体宽度 - 80px 。

4. 兼容性

5. 实例

1. 让 demo 的宽度比父级宽度小 200px。

   .out-box{ border:1px solid #ccc; width: 200px; height: 200px; } .demo{ border:1px solid #ccc; height:100px; width: calc(100% - 20px); }

效果图：

宽度比父级宽度小 200px 效果图

1. 使 demo 的宽度、高度为父元素的 1/3。

   .out-box{ border:1px solid #ccc; width: 200px; height: 200px; } .demo{ border:1px solid #ccc; height: calc(100% /3); width: calc(100% /3);
   }

效果图：

宽度、高度为父元素的 1/3 效果图

1. 使 demo 的宽度、高度为父元素的 (100% + 200px) /3。

   .out-box{ border:1px solid #ccc; width: 200px; height: 200px; } .demo{ border:1px solid #ccc; height: calc( (100% + 200px) /3); width: calc( (100% + 200px) /3);
   }

效果图：

宽度、高度为父元素的 1/3 效果图

6. 经验分享

1. calc 的用法非常简单，它的出现给我们带来了很多方便。它多用于在父级元素大小变动时候内部子元素的大小展示，例如上面的例子。
   在使用它的时候，如果遇到复杂的运算，我们可以人为的去先处理下，来减少内部的 （ ），例如 3 中 ：

   calc( (100% + 200px) /3)

我们可以写成 ：

calc( 100%/3 + 200px/3)

1. 要注意，calc 中的 运算符 的前后都需要保留一个 空格 ，这一点千万不要忘记得了，如果遇到问题不要慌，打代码调试器看看问题到底出在哪里了。