CSS 实验中的功能之calc

CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状.

你还可以在一个calc()内部嵌套另一个calc().

可以在calc里运用的运算符就是加减乘除，我们可以拿他实现很棒的效果。

比如：

.banner {
  position:absolute;
  left: 40px;
  width: 90%;                       /* fallback for browsers without support for calc() */
  width: -webkit-calc(100% - 80px);  /* WebKit 536.3 (Chrome 19) and above, experimental */
  width:         calc(100% - 80px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}

这里我们可以看到一个计算表达式，这是我们一直想做到的，但实际想做到这一点却要依靠javascript计算，所以我才说，这很棒。

剩下的演示不多做了，关于兼容性表以及详细的其他示例，可以看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc