使用box-sizing: border-box可解决等高列中height与padding导致的高度不一致问题，配合Flexbox实现自适应等高布局，确保各列视觉高度统一且避免溢出。
在CSS布局中，实现等高列（equal-height columns）常遇到height与padding的协调问题。由于盒模型默认为content-box，设置固定高度时，padding会额外增加元素总高度，容易导致列之间视觉不齐或溢出容器。解决这一问题的关键在于正确使用CSS盒模型属性box-sizing。
理解盒模型对等高列的影响
默认情况下，元素的box-sizing: content-box意味着：
- 设定的
height仅作用于内容区域 -
padding和border会在此基础上增加实际占用空间 - 若多列设置了相同
height但不同padding，视觉上将不再等高
例如：两个列都设height: 200px，一个有padding: 20px，其总高度变为240px，破坏了等高效果。
使用 box-sizing: border-box 统一计算方式
将所有列设置为box-sizing: border-box，可以让height包含padding和border，从而确保总高度一致：
立即学习“前端免费学习笔记（深入）”；
.column {
height: 200px;
padding: 20px;
box-sizing: border-box;
}
此时，内容区会自动压缩为160px（200 - 20*2），整体高度仍为200px，各列保持对齐。
结合 Flexbox 实现自适应等高列
更现代的方法是使用Flexbox，父容器启用弹性布局后，子项默认拉伸至相同高度，无需手动设height：
.container {
display: flex;
}
.column {
flex: 1;
padding: 20px;
box-sizing: border-box;
}
Flex item的自然行为是等高（cross-axis stretch），配合box-sizing: border-box，即使内容不等，视觉高度也一致，且padding不会造成溢出。
处理特殊情况：固定高度 + 内边距协调
若必须使用固定height（如适配旧布局），确保所有列：
- 统一设置
box-sizing: border-box - 计算
padding后的可用内容空间 - 避免在列内添加超出高度的元素（如大图片、绝对定位元素）
可借助CSS自定义属性简化维护：
.column {
--target-height: 200px;
--inner-padding: 20px;
height: var(--target-height);
padding: var(--inner-padding);
box-sizing: border-box;
}
基本上就这些。关键点是统一盒模型行为，优先使用box-sizing: border-box，再配合Flexbox等现代布局手段，就能轻松实现padding与height协调的等高列。不复杂但容易忽略细节。
