一、前言
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()嵌套
《PHP设计模式》首先介绍了设计模式，讲述了设计模式的使用及重要性，并且详细说明了应用设计模式的场合。接下来，本书通过代码示例介绍了许多设计模式。最后，本书通过全面深入的案例分析说明了如何使用设计模式来计划新的应用程序，如何采用PHP语言编写这些模式，以及如何使用书中介绍的设计模式修正和重构已有的代码块。作者采用专业的、便于使用的格式来介绍相关的概念，自学成才的编程人员与经过更多正规培训的编程人员
341
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()的详细介绍的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
193
收藏
