使用calc()可精确计算CSS盒模型尺寸，如设置总宽300px的元素时，通过width: calc(300px - 20px 2 - 2px 2)减去padding和border，确保内容区宽度正确；在响应式布局中可用width: calc(100% - 40px)实现自适应；但推荐全局设置box-sizing: border-box，使width包含padding和border，简化计算并提升维护性。
在CSS中使用calc()函数可以灵活地计算盒模型中的尺寸，比如width、padding和border的组合。这样能确保元素的实际宽度符合设计需求，避免因盒模型计算导致布局错位。
理解盒模型与calc的作用
默认情况下，元素的总宽度是内容宽度（width）加上内边距（padding）和边框（border）。当设置box-sizing: content-box时，width仅指内容区域，而padding和border会额外增加整体尺寸。这时用calc()就能精确控制内容区宽度，使总宽保持固定。
例如，想让一个元素总宽为300px，包含20px的左右padding和2px的左右border，可这样写：
.box {
width: calc(300px - 20px * 2 - 2px * 2);
padding: 0 20px;
border: 1px solid #000; /* 左右各1px，共2px */
box-sizing: content-box;
}
这里从目标总宽中减去左右内边距和边框，得到内容区应有的宽度。
立即学习“前端免费学习笔记（深入）”；
使用calc简化响应式布局
在响应式设计中，常需让元素占据一定视口宽度，同时保留内边距。此时可用calc()结合百分比和固定值：
.responsive-box {
width: calc(100% - 40px);
padding: 10px 20px;
border: 1px solid #ccc;
}
这个元素在父容器中左右各留20px内边距，内容宽度自动调整，适合移动端或侧边留白场景。
推荐使用border-box简化计算
为了避免频繁使用calc()，建议将盒模型设为border-box：
*, *::before, *::after {
box-sizing: border-box;
}
.simple-box {
width: 300px;
padding: 20px;
border: 2px solid #000;
}
此时width已包含padding和border，浏览器自动调整内容区大小，无需手动计算，更直观且维护方便。
基本上就这些。合理使用calc()能解决复杂尺寸需求，但搭配box-sizing: border-box通常更高效。
