calc混合单位计算的基本语法与单位支持
calc是CSS3引入的原生计算函数，它的核心作用是在CSS属性值中执行数学运算，最典型的应用场景就是解决元素宽度难以固定的问题。在需要混合不同单位计算宽度时，calc支持四则运算，也就是加（+）、减（-）、乘（*）、除（/）四种操作符，其中加减操作符的两侧必须保留空格，这是很多开发者容易写错的点，如果写成width: calc(100%-20px)，浏览器会直接忽略这条样式规则，正确的写法应该是width: calc(100% - 20px)。
calc支持的单位非常丰富，除了常见的px、%、em、rem之外，还支持vw、vh、vmin、vmax等视口相关单位，甚至可以和CSS变量结合使用。比如我们想让一个容器的宽度等于视口宽度减去两侧各15px的留白，就可以写成width: calc(100vw - 30px)，这里的100vw是视口总宽度，减去30px的固定留白后，容器宽度会自动适配不同设备的视口尺寸。如果是多栏布局中，左侧边栏固定200px，右侧内容区需要占满剩余空间，不需要再用浮动或者flex的复杂计算，直接给右侧设置width: calc(100% - 200px)就可以实现。
需要注意的是，calc的乘除法计算中，至少有一个操作数是无单位的数字，比如calc(10px * 2)是合法的，结果是20px；但calc(10px * 5px)就是非法的，因为两个带单位的数值相乘后单位会变成px²，CSS无法解析这种单位。另外除号的后一个操作数也必须是无单位的数字，比如calc(100% / 3)是合法的，会将宽度分成三等分，而calc(100% / 30px)就是错误的写法。
常见宽度固定难题的calc解决方案
在传统的PC端布局中，经常会遇到侧边栏固定宽度、主内容区自适应的需求，早期的实现方式要么用浮动配合margin负值，要么用flex布局的flex属性，前者容易出现高度塌陷和清除浮动的额外代码，后者需要额外设置父容器的display属性，而用calc混合单位计算的方式只需要两行样式就能实现。比如左侧边栏宽度固定220px，右侧内容区需要贴着边栏排列，同时占满父容器剩余宽度，我们可以给父容器设置width: 100%，左侧边栏设置width: 220px; float: left，右侧内容区设置width: calc(100% - 220px); float: left，这样不需要考虑浮动导致的宽度溢出问题，布局逻辑非常清晰。
响应式布局中经常会遇到需要同时保留固定间距和动态宽度的情况，比如一行要放3个卡片，卡片之间的间距固定16px，卡片宽度需要根据屏幕宽度自动调整。如果只用百分比设置宽度，三个卡片各占33.333%，加上两个16px的间距，总宽度会超过100%导致换行。这时候用calc混合单位计算就非常合适，每个卡片的宽度可以设置为calc((100% - 32px) / 3)，先算出扣除两个间距后的剩余总宽度，再平均分成三份，这样不管屏幕宽度怎么变化，三个卡片都能刚好排在一行，不会出现溢出或者换行的问题。
还有一种常见的场景是弹窗或者悬浮层的宽度设置，比如要求弹窗宽度是视口宽度的80%，同时最大宽度不超过1200px，最小宽度不小于320px，除了用max-width和min-width之外，也可以用calc实现更灵活的控制。比如可以写成width: calc(min(80vw, 1200px))，这里的min函数会取两个值中较小的那个，当视口宽度对应的80vw小于1200px时用80vw，否则用1200px，再配合min-width: 320px就可以实现完整的宽度约束，比单独设置多个属性更简洁。
calc混合单位计算的注意事项与性能表现
使用calc进行混合单位计算时，首先要保证表达式的语法完全正确，除了前面提到的加减操作符两侧必须加空格之外，还要注意嵌套使用时的括号匹配。比如要计算(100% - 20px) * 2，必须写成calc((100% - 20px) * 2)，内层括号用来保证先计算减法再算乘法，如果漏写内层括号，浏览器会按照运算符优先级先算乘法再算减法，得到的结果就会不符合预期。另外calc内部的值如果是CSS变量，变量本身带单位的话不需要额外加单位，比如定义了--sidebar-width: 200px，那么计算时可以写成calc(100% - var(--sidebar-width))，不需要再给var部分加px。
从性能角度来看，calc的计算是在浏览器渲染阶段实时执行的，属于CSS原生的计算能力，不需要JavaScript参与，所以性能开销非常低，几乎可以忽略不计。不过如果页面中存在大量使用calc的复杂表达式，比如嵌套多层calc、同时结合多个视口单位和CSS变量，可能会在极端情况下增加一点样式计算的耗时，但正常业务场景下的使用完全不会有性能问题。另外calc的兼容性目前已经非常好，除了IE9及以下版本不支持之外，所有现代浏览器都完全支持，如果需要兼容老旧的IE浏览器，可以搭配渐进增强的写法，先给元素设置一个固定宽度的 fallback 值，再写calc的规则，比如：
.sidebar {
width: 200px; /* 不支持calc的浏览器会用这个值 */
width: calc(100% - 800px); /* 支持的浏览器会覆盖上面的规则 */
}
最后要注意calc计算结果的精度问题，当使用百分比和px混合计算时，结果可能会出现小数像素，不同浏览器对小数像素的处理方式略有差异，比如Chrome会做四舍五入，而Firefox可能会直接截断。如果布局对像素精度要求极高，比如需要精确对齐的UI组件，可以在calc的结果基础上再配合box-sizing: border-box使用，把padding和border的宽度计入元素总宽度，避免因为小数像素导致的边框重叠或者间距不一致的问题。比如设置了width: calc(100% - 20px)之后，再加上box-sizing: border-box，即使元素有1px的border，也不会额外增加总宽度，布局的稳定性会更高。
实际布局案例演示
下面我们用一个完整的后台管理布局案例来演示calc混合单位计算的实际应用，布局结构包含顶部导航栏、左侧菜单栏、右侧内容区三个部分，其中顶部导航栏高度固定60px，左侧菜单栏宽度固定240px，右侧内容区需要自动填充剩余空间，同时内容区内部有20px的内边距。首先我们定义父容器的样式：
.layout {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.header {
height: 60px;
background: #1890ff;
color: #fff;
line-height: 60px;
padding: 0 20px;
}
.menu {
width: 240px;
height: calc(100vh - 60px);
float: left;
background: #001529;
color: #fff;
}
.content {
height: calc(100vh - 60px);
width: calc(100vw - 240px);
float: left;
padding: 20px;
box-sizing: border-box;
background: #f0f2f5;
overflow-y: auto;
}
这段样式中，菜单栏的高度用calc(100vh - 60px)计算，刚好是视口总高度减去顶部导航栏的高度，不会出现滚动条；内容区的宽度用calc(100vw - 240px)计算，刚好是视口总宽度减去左侧菜单栏的宽度，高度同样用减去顶部导航栏高度的计算方式，同时设置了box-sizing: border-box和20px的padding，padding的宽度会被计入总宽度，不会挤压内容区的实际可用空间。
如果后续需要调整左侧菜单栏的宽度，比如改成180px，只需要修改--menu-width这个CSS变量的值，内容区的宽度计算会自动更新，不需要修改多处样式。这种写法比传统的flex布局更直观，尤其是对于刚接触CSS的新手来说，不需要理解flex-grow、flex-shrink这些属性，只需要知道calc可以做混合单位的计算，就能快速实现复杂的宽度布局需求。如果需要在移动端隐藏左侧菜单栏，只需要给菜单栏加一个display: none的规则，同时把内容区的宽度改成width: 100vw就可以，适配逻辑也非常简单。