CSS计算函数--calc()函数的定义和使用

calc()函数允许CSS在声明属性值时进行一些计算，支持加减乘除运算（支持嵌套运算）。一般用于长度、角度、时间、百分比、频率、数值等运算。

一、calc()函数的语法

property: calc(expression)

如：

width: calc(100% - 100px);

常见的一种应用场景为会员登录注册页面的前端切图，如，头部Header和底部版权Footer部分的高度确定，页面中部为登录框，一般我们需要将版权放置在页面的底部，如果使用Position定位的话，则过于绝对，当页面被拖放的过小时，则会出现底部版权信息覆盖登录注册表单框的情况。

所以，使用calc()函数可以很好的解决这一需求，具体代码如下：

HTML代码：

<div id="header">顶部标题、LOGO区域</div>
<div id="content">
    <form>
        <p>表单框，最小高度为600px;</p>
    </form>
</div>
<div id="footer">
    <p>Copyright &copy; <a href="https://www.qietujiang.com">切图匠</a></p>
</div>

CSS代码：

html,body{ height: 100%;}
#header, #content, #footer{ width: 100%; float: left; text-align: center;}

#header{ height: 100px; line-height: 100px; background: #35393c; color: #fff;}
#content{
    height: calc(100% - 150px); min-height: 600px; background: lightskyblue;
    position: relative;
}
form{
    width: 600px; height: 600px; background: red; position: absolute; left: 50%; margin-left: -300px;
    top: calc((100% - 600px)/2);
}
#footer{ height: 50px; line-height: 50px; background: #35393c; color: #fff;}

这样，在视窗高度大于 100+600+50 = 750px的时候，版权信息总是在最底部，表单框也始终居于#content区域的正中心。而当视窗高度小于750px的时候，则页面会自动出现滚动条，很好的保护了表单框不会被版权信息遮盖。

这里有一个要注意的常识性问题：在使用calc()函数定义高度，且其中存在百分比参数时，必须设置html,body{ height: 100%;}，当然你可以在定义#content的高度时使用 height: calc(100vh - 150px); 即使用100vh代替100%的写法。

为了提升用户体验，我们还可以给form表单框增加外边距等更多设置。

二、calc()函数使用注意点：

1、加减运算符两边需留空格、乘除运算的运算符两边不需要，但是为了统一，一般都建议在运算符两边加空格；

2、calc()函数支持多层嵌套；

3、支持与其他CSS函数嵌套使用，如var()函数；

4、有些前端同学反馈calc的单词不是很好记忆，这个其实calc是计算的单词calculator的缩写，在window系统中，可以在命令窗口直接输入calc直接打开计算器。

• - - - - - - - -

更多CSS函数的介绍和使用，请移步查看：《CSS函数使用详解》