正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。
怎么使用
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。
标准的写法：
.class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }
兼容性
立即学习“前端免费学习笔记（深入）”；
基本理论
calc可以做用于任何具有大小的东东，比如border、margin、pading、font-size和width等属性设置动态值
支持的运算单位： rem , em , percentage , px
计算优先级别和数学一致
注意点:
calc 内部的表达式，在使用运算符号时，两遍必须加上空格（虽然乘除可以无视，但还是建议带上）！！！！！，不然会解析错误！！，看演示写法
width:calc(10 * 10px); width:calc(50% - 50px); width:calc(50% + 5em); width:calc(10% / 1rem);
小demo
仅仅作为演示,响应伸缩
代码
CSS3 Calc html{ font-size:62.5%; } .wrapper{ width:100%; border:5px solid #f00; margin:10px ; box-sizing:border-box; height:200px; clear:b; } .items{ height:calc(100% - 40px); display:inline-block; border:1px solid #f70; text-align:center; } .w1 .items{ float:left; margin-top:calc( 5 * 4px ); border:3px solid #0F16C6; width:calc(100% / 3 - 6px) } .w2 .items{ float:left; margin-top:calc(200px - 20px * 9); width:calc(100% / 3 - 2px) } .w3 .items{ float:left; width:calc(100% / 3 - (3 * 6px)); margin:calc(2px * 4 ); } .w3 .items:first-child{ padding:calc(5 * 1rem - 3rem); box-sizing:border-box; }
margin-top:calc( 5 * 4px );
margin-top:calc( 5 * 4px );
margin-top:calc( 5 * 4px );
margin-top:calc(200px - 20px * 9);
margin-top:calc(200px - 20px * 9);
margin-top:calc(200px - 20px * 9);
width:calc(100% / 3 - (3 * 6px));
margin:calc(2px * 4 );
padding:calc(5 * 1rem - 3rem);width:calc(100% / 3 - (3 * 6px));
margin:calc(2px * 4 )width:calc(100% / 3 - (3 * 6px));
margin:calc(2px * 4 )
总结
calac 和flexbox搭配，用来写流式布局非常好；
相关推荐：
详解CSS3 中的calc() 用法
CSS3中calc()做响应模式布局方法介绍
使用CSS3中calc()属性来以算式表达尺寸数值的说明
以上就是CSS3 calc()计算属性详细介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609021.html
微信扫一扫 
支付宝扫一扫 
