calc()函数可进行动态尺寸计算，支持混合单位运算；使用时需注意运算符前后空格，可用于自适应布局、响应式高度及栅格间距控制。
CSS 的 calc() 函数是一个非常实用的工具，能够让我们在设置元素尺寸时进行动态计算。它支持加（+）、减（-）、乘（*）和除（/）运算，并可以混合使用不同单位，比如像素（px）、百分比（%）、视窗单位（vw/vh）等，从而实现灵活的响应式布局。
基本语法与规则
calc() 的基本写法是：calc(表达式)，其中表达式可以包含数值和单位的组合。注意：
运算符前后必须有空格，例如 calc(100% – 20px) 是正确的，而 calc(100%-20px) 会失效。可以混合使用相对单位和绝对单位，这是它最强大的地方。支持嵌套，例如 calc(100vh – calc(50% + 20px))。
实现自适应宽度布局
常见场景是让一个元素占据剩余宽度。比如侧边栏固定为 200px，主内容区自动填充剩余空间：
.container {
display: flex;
}
.sidebar {
width: 200px;
}
.main-content {
width: calc(100% – 200px);
}
这样无论容器多宽，主内容区都能动态调整尺寸。
立即学习“前端免费学习笔记（深入）”；
结合视窗单位实现响应式高度
希望某个元素的高度等于整个视窗高度减去头部导航的高度，可以这样写：
Revid AI
AI短视频生成平台
96 查看详情 header {
height: 60px;
}
.content-area {
height: calc(100vh – 60px);
overflow-y: auto;
}
这在全屏布局或后台管理系统中特别有用，确保内容区域不会被遮挡。
灵活设置间距与栅格
在没有使用 Flex 或 Grid 的情况下，可以用 calc() 手动实现等分布局。例如创建三列布局，每列之间有 20px 间隔：
.column {
width: calc((100% – 40px) / 3);
margin-right: 20px;
}
.column:last-child {
margin-right: 0;
}
这里通过减去总间隙（两个 20px 间距）再均分，实现视觉上均匀的三栏。
基本上就这些。calc() 让 CSS 尺寸更智能，减少对 JavaScript 或复杂布局模型的依赖，特别适合需要精确控制又保持响应性的场景。不复杂但容易忽略细节，比如空格和单位混用规则，写的时候多留意就行。
以上就是如何通过css calc函数实现动态尺寸的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1040909.html
微信扫一扫 
支付宝扫一扫 
