css函数calc()的使用
2017-10-09 23:21

calc函数四则运算

calc函数是css中提供的一个用来计算属性值,通过calc函数我们可以设置诸如width,height等一系列属性的值。换句话说,calc函数把一些简单的js计算挪到了css中了,把布局运算交给了浏览器,减少了js的负担。

calc函数可以通过 +,-,*,/ 四则运算,下面我们看一个高度的例子:

height:calc(100% - 50px);

这里需要注意一下,calc计算+,-的时候,一定要在+,-号两边添加一个空格,不然的话会是无效的。虽然 *,/ 计算两边不需要添加空格,但是为了统一,也为了能养成习惯,避免出错,我们要在四则运算时运算符两边都要添加空格。

calc运算的乘法中必须要有一个值是整数,除法运算中被除数必须是整数,不然的话也会无效。

calc的好处就是不同单位之间可以互相运算,百分比,像素,em,rem等是可以掺杂运算的。

calc函数的使用例子

calc运算要结合实际应用才能发挥其作用。

image.png

比如有上面这么一个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是自适应增长的导致的。

image.png

我们在实际应用中,经常碰到这类场景,这是个列表页,或者文章页。但是如果列表不足或者文章内容不够,那么页面的页尾会跑上去,这不符合我们的预期,这时候我们就可以使用上面的calc运算的代码,只需要改成min-height就可以了。

min-height:calc(100% - 50px);

添加了calc运算的属性后,就能达到我们预期的效果了。

image.png

在没有calc函数的时候,我们要想达到这种效果,只能是使用js进行计算。而随着现代浏览器的普及,以及calc的兼容性,我们可以采用calc来实现这个效果了。

calc的兼容性也不错,如下:

image.png

可以看到IE9以上就支持了,所以支持性还是非常乐观的。

上面的calc也是我发现的一个用途,如果你有更好的用途,请在下面留言。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2000)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1