今天小编跟大家讲解下有关CSS3 calc()会计算属性详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3 calc()会计算属性详解 的相关资料，希望小伙伴们看了有所帮助。
前言
正如其名 calc是css3中新增的计算属性 让很多属性增加了一个表达式的说法；
calc是英文单词calculate(计算)的缩写 是css3的一个新增的功能 你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。
怎么使用
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题 而且还可以根据单位如px,em,rem和百分比来转化计算。标准的写法：
.class{ 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
仅仅作为演示,响应伸缩
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 Calc</title> <style type="text/css" media="screen"> 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; } </style></head><body> <div class="wrapper w1"> <div class="items">margin-top:calc( 5 * 4px );</div> <div class="items">margin-top:calc( 5 * 4px );</div> <div class="items">margin-top:calc( 5 * 4px );</div> </div> <div class="wrapper w2"> <div class="items">margin-top:calc(200px - 20px * 9);</div> <div class="items">margin-top:calc(200px - 20px * 9);</div> <div class="items">margin-top:calc(200px - 20px * 9);</div> </div> <div class="wrapper w3"> <div class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</div> <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div> <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div> </div></body></html>总结
calac 和flexbox搭配 用来写流式布局非常好；
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
