calc在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持
+ 、
- 、
* 、
/ 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 calc 大大的增加了css的灵活性。给一些特殊的布局，提供了方便。示例的显示的效果
使用cacl 布局的一个示例
想做个一个效果, 就是在
#div1 的背景，延伸到
#div2 可见区域，在
#div2 显示固定60个像素。就是黑色框宽度是60px。而不用考虑
#div1 的宽度。css代码
#div1 {
width: 100%;
min-width: 400px;
outline: blue;
}
#div2 {
width: 300px;
margin: 0 auto;
outline: 1px solid #ccc;
color: white;
}html代码
<div id="div1" class="cw">
<div id="div2">
test
</div>
</div>解决的方法
.cw {
background:blue linear-gradient(
to right, red calc(50% - 150px + 60px ) ,
transparent calc(50% - 150px + 60px )
);
}cacl 的兼容性
