在过去的几年时间里，前端WEB页面的布局已经从固定宽度演变为现在的响应式布局。本教程将带大家理解CSS calc属性，这是一个非常有用的属性，理解它的最好方法是举一些例子。
Example 1：垂直Margin(Vertical Flush Margins)
来看看下面的一张图片：图片中的瀑布图片被浮动起来，右边有2em
的margin。图片被制作为流式布局，宽度为它的父元素的50%。它的html结果如下：
<img src="1.jpg" alt style="width:50%; margin-right: 2rem; float: left;">
<p>Det er et velkjent faktum...</p>
现在，我们想要瀑布图片的margins沿着垂直方向延伸，现在的问题是 p 段落的文字最终会跑到图片的下方去。我们想要的效果如下图：
解决的方法有很多种，我们这里要遵从下面的原则：跟随在图片后的 p 元素要有50%+2em的左margin。
我们在兄弟选择器上使用calc属性来解决这个问题：
img ~ p { margin-left: calc(50% + 2rem); }
calc 允许我们融合不同的单位：百分比和rem，从而得到margin固定而图片是流式布局的效果。
Example 2：容器中的全屏宽度(Full-Width Elements In Padded Containers)
来看下面的例子：
HTML
<article>
<header>
<img src="fredvang.jpg" alt>
</header>
<p>......</p>
</article>
CSS
* { box-sizing: border-box; }
body { background: #000; font-family: Edelsans, sans-serif; line-height: 1.5; }
article { width: 80%; margin: 0 auto; background: #fff; padding: 0 2rem; color: #000; }
article header img { width: 100%; height: auto; }
上面的代码得到的页面效果如下：
这个设计的问题是给 article 元素的padding会作用在 header 上。使图片也一起被压缩了。
我们能通过在 header 元素上使用 calc 解决这个问题。
article header { width: calc(100% + 4rem); margin-left: -2rem; }
通过在 head 上添加4rem的宽度来弥补左右两侧的2rem的padding。得到结果如下：
操作符(Operations)
calc 可以做基本的数学运算：+、-、*、/。
有一点要记住， calc 在做加法和减法运算时，在它的操作符两侧必须有空格隔开并且 calc 必须紧贴着括号。例如：
下面的写法是正确的：
width: calc(20% - 1rem);
下面的写法是错误的：
width: calc(20%-1rem);
下面的写法也是错误的：
width: calc (20% - 1rem);
如果书写错误，浏览器会将“-”号解释为“负值”。乘法和除法不需要添加空格，但是建议都加上空格。
浏览器支持和局限性
所有的现代浏览器都支持使用 calc 来计算长度。理论上，可以在任何地方使用这些 calc 计算，这将会 得到一些非常有趣的效果：
.box { background: rgba(255, 0, 0, calc(.3 * 2)); }
.box { transform: rotate(calc(45deg - 2.31rad)); }
如果你看到上面的两个方形分别是半透明和旋转一定角度的，那么祝贺你，你的浏览器支持不同声明的CSS calc 属性。大多数浏览器对这种极端情况都做了声明：
- Chrome和Opera：支持所有的 calc ，但是Chrome 38 / Opera 25不支持角度计算。
- Firefox：仅支持 calc 的长度和百分比计算。
- Safari / Mobile Safari： calc 可以计算3D CSS transforms和olor calculations 。但奇怪的是，它不支持2D transforms。
- Android 4.4:仅支持加法和减法运算，较早的版本完全不支持 calc 。
- Chrome 38 on Android:和它的桌面版本支持是一样的。
- Internet Explorer 9+:（desktop and mobile）支持长度计算。如果在IE9中使用calc来计算background-position，IE9将崩溃！
另外，绝大多数浏览器在使用calc时不需要添加厂商的前缀。
