CSS 3 中的计算函数 calc() 有啥用?

作者:vkvi 来源:千一网络(原创) 日期:2020-6-25

CSS 3 中是有计算函数的,名称是 calc()

比如:

height:calc(300px * 0.1);

但是,如果我们想实现 width * 0.1,来实现宽高比约束,就没办法了,而且也不支持变量。所以说用处实际上并不大。只是有下面这种情况,我觉得有一点用,但也仅仅是省点代码而已。

/*原来的 CSS 代码,使 div 框居中显示*/
div
{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-200px;
    width:400px;
	height:200px;
	background:lightblue;
}
/*新的 CSS 代码,使用 calc(),同样使 div 框居中显示*/
div
{
	position:absolute;
	top:calc(50% - 100px);
	left:calc(50% - 200px);
    width:400px;
	height:200px;
	background:lightblue;
}

注意:前面的 calc(300px * 0.1),* 两端要不要空格都没什么;而 calc(50% - 100px),- 两端一定要有空格。所以操作符两端最好写上空格,否则很可能 calc() 不生效(+、- 必须要空格,*、/ 可以不要)。

还有一种是 width:(100% - 10px),就是 100% 宽度减去 padding 的 10px,但是这种情况通常也可以用改变 box-sizing 来解决(使宽度包含 padding),所以也没起什么决定性作用。而如果 10px 是 margin,倒是也起到一点作用,但是也没多大作用,以前没 calc() 解决起来也不麻烦。

相关文章
文章评论