努力向前走一步，离梦想就更近一步。错过现在就等于糟蹋未来。生活就是那样，不留一丝余地，活下去似乎都需要很大的勇气。
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 的兼容性
到此这篇关于css中的计算函数calc在网站布局中一个示例就介绍到这了。流过泪的眼睛更明亮，滴过血的心灵更坚强！更多相关css中的计算函数calc在网站布局中一个示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
