css3⾼度计算函数cal_css函数calc（）的使⽤
calc函数四则运算
calc函数是css中提供的⼀个⽤来计算属性值，通过calc函数我们可以设置诸如width，height等⼀系列属性的值。换句话说，calc函数把⼀些简单的js计算挪到了css中了，把布局运算交给了浏览器，减少了js的负担。
calc函数可以通过 +,-,*,/ 四则运算，下⾯我们看⼀个⾼度的例⼦：height:calc(100% - 50px);
这⾥需要注意⼀下，calc计算+，-的时候，⼀定要在+，-号两边添加⼀个空格，不然的话会是⽆效的。虽然 *，/ 计算两边不需要添加空格，但是为了统⼀，也为了能养成习惯，避免出错，我们要在四则运算时运算符两边都要添加空格。
box sizingcalc运算的乘法中必须要有⼀个值是整数，除法运算中被除数必须是整数，不然的话也会⽆效。
calc的好处就是不同单位之间可以互相运算，百分⽐，像素，em，rem等是可以掺杂运算的。
calc函数的使⽤例⼦
calc运算要结合实际应⽤才能发挥其作⽤。
⽐如有上⾯这么⼀个div，.cont{margin:25px;padding:20px;box-sizing:border-box;border:1px solid #bababa;}
那么，我们要想让这个div跟浏览器的⾼度⼀样⾼的话，那么我们可以通过calc进⾏计算。html,body{height:100%;}
body{
margin:0;
padding:0;
background:#f1f1f1;
overflow: hidden;
}
.cont{
margin:25px;
background:#fff;
box-sizing: border-box;
padding:20px;
border:1px solid #bababa;
height:calc(100% - 50px);
}
通过上述代码，我们就可以实现⾃适应浏览器⾼度的div，不过这⾥body的overflow:hidden是必须的，不然的话下⾯会多出⼀块空⽩，具体原因不祥，猜测是因为body是⾃适应增长的导致的。
我们在实际应⽤中，经常碰到这类场景，这是个列表页，或者⽂章页。但是如果列表不⾜或者⽂章内容不够，那么页⾯的页尾会跑上去，这不符合我们的预期，这时候我们就可以使⽤上⾯的calc运算的代码，只需要改成min-height就可以了。min-height:calc(100% - 50px);
添加了calc运算的属性后，就能达到我们预期的效果了。
在没有calc函数的时候，我们要想达到这种效果，只能是使⽤js进⾏计算。⽽随着现代浏览器的普及，以及calc的兼容性，我们可以采⽤calc来实现这个效果了。
calc的兼容性也不错，如下：
可以看到IE9以上就⽀持了，所以⽀持性还是⾮常乐观的。
上⾯的calc也是我发现的⼀个⽤途，如果你有更好的⽤途，请在下⾯留⾔。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。