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() 不生效(+、- 必须要空格,*、/ 可以不要)。