在html页面的样式开发中，我们经常会遇到需要让元素尺寸根据父容器或者其他元素动态变化的需求，比如侧边栏固定宽度后主内容区自动占满剩余空间，或者元素宽度需要减去固定的内边距、边框值。这时候使用calc函数就能非常方便地实现这些灵活尺寸效果，不需要写复杂的js逻辑来计算尺寸。
calc函数的基本语法
calc是css3引入的一个计算函数，全称为calculate，用于在声明css属性值时执行数学运算。它的基本语法格式如下：
/* 基本语法：calc(数学表达式) */
.element {
width: calc(100% - 20px);
height: calc(50vh + 30px);
}
calc支持四则运算，包括加法（+）、减法（-）、乘法（*）、除法（/），运算符号前后必须保留一个空格，否则会导致计算失效。比如写calc(100%-20px)是错误的，必须写成calc(100% - 20px)。
calc的使用注意事项
- 运算符号前后必须有空格，这是最常见的错误点，减法、加法尤其要注意。
- 乘法计算中，至少有一个值是数字，不能两个都是带单位的数值，比如
calc(100% * 2)是合法的，calc(100% * 200px)是非法的。 - 除法计算中，除数必须是数字，不能带单位，比如
calc(100% / 3)是合法的，calc(100% / 30px)是非法的。 - calc可以混合使用不同的单位，比如百分比、px、vh、vw、em等都可以一起参与运算。
calc实现灵活尺寸的常见场景
场景1：两栏布局剩余宽度计算
常见的后台管理页面左侧是固定宽度的侧边栏，右侧主内容区需要占满剩余宽度，用calc可以轻松实现：
/* 侧边栏固定宽度200px */
.sidebar {
width: 200px;
float: left;
background: #f0f0f0;
}
/* 主内容区宽度 = 总宽度 - 侧边栏宽度 */
.main-content {
width: calc(100% - 200px);
float: left;
padding: 20px;
box-sizing: border-box;
}
场景2：元素宽度减去固定内边距和边框
如果给元素设置了固定内边距和边框，又希望元素总宽度不超过父容器的100%，可以用calc计算内容区的宽度：
.container {
width: 100%;
}
.box {
/* 总宽度 = 100% - 左右内边距 - 左右边框 */
width: calc(100% - 40px - 4px);
padding: 20px;
border: 2px solid #ccc;
/* 开启border-box可以让width包含内边距和边框，这里用calc是演示计算逻辑 */
box-sizing: content-box;
}
场景3：响应式字体大小计算
希望字体大小在不同屏幕下有一个基础值，同时随屏幕宽度动态变化，也可以用calc实现：
/* 基础字体14px，屏幕宽度每增加100px，字体增加0.5px */
body {
font-size: calc(14px + 0.5vw);
}
/* 大标题字体，最小18px，最大24px */
h1 {
font-size: calc(18px + 1vw);
/* 可以配合clamp函数限制最大最小值，clamp(最小值, 计算值, 最大值) */
font-size: clamp(18px, calc(18px + 1vw), 24px);
}
calc的兼容性说明
calc函数的兼容性非常好，目前所有主流现代浏览器都支持，包括Chrome、Firefox、Safari、Edge等，IE10及以上版本也支持带前缀的写法，如果需要兼容旧版IE，可以添加前缀：
.element {
width: -webkit-calc(100% - 20px); /* Safari 6-8 */
width: -moz-calc(100% - 20px); /* Firefox 4-15 */
width: calc(100% - 20px); /* 标准写法 */
}
实际开发中如果不需要兼容非常旧的浏览器，直接写标准calc语法即可，不需要额外添加前缀。