CSS3中新属性calc()的详细介绍

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3中新属性calc()的详细介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1848字，纯文字阅读大概需要3分钟。

内容图文

一、前言

　　calc()看起来像是javascript中的一个函数，而事实上它是用在Css中的，可以用它来计算长度（宽度或高度)，能够自动根据不同尺寸的屏幕自动调接数值，从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素，当然想到的第一个就是使用margin：0 auto；或者使用定位和margin结合的这种简单的方法，当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西。

二、使用方法

　　calc()中的参数是一个计算公式，通过这个计算公式把计算宽度和数值的任务扔给不同尺寸下的浏览器，让页面能够自己得出宽度或数值的结论，这些计算公式也都是很简单的加( + )减( - )乘( * )除( / )运算。

p{
    width: calc(15px + 15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px}

　　从上面的例子中可以看出，加( + )减( - )运算中需要计算的数值与运算符之间是有空格的，并且这空格是不能省略的，而乘( * )除( / )运算里的空格是可以省略的。

　　calc()中的表达式是可以使用百分比、px、em、rem等单位进行计算的，并且单位可以混在一起计算：

p{
    width: calc(3em + 5px);//53px}

三、calc()嵌套

　　calc()是一个函数，那么函数是可以支持嵌套的，可以通过不同的公式来算出最后的结果。

p{
    --widthA: calc(10px + 190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}

四、简单的居中

　　calc()可以计算宽度以后，居中显示的实现就可以有很多方法，padding或者margin，但它的原理都是一样的。

p{
    padding: 0 calc((100% - 1024px)/2);
}

　　假设中间的内容是固定宽度1024px，那么获取父级的宽度或者窗口的宽度100%，然后减去内容的宽度后剩下的就是需要分配给内容左右两边的宽度，将它们一分为二（/2）就可以实现中间1024px宽度的内容一直居中了。

五、兼容性

　　calc()的兼容性已经很高了，IE9+、FF4.0+、Chrome和Safari6+都已经支持calc()的应用，但还是要加上不同浏览器的前缀。

div{
    -moz-calc(expression);
    -webkit-calc(expression);
    calc(expression);
　　 //expression为计算公式}

以上就是CSS3中新属性calc()的详细介绍的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS3中新属性calc()的详细介绍全部内容，希望文章能够帮你解决CSS3中新属性calc()的详细介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---