box-sizing: border-box不能实现等高列布局，因为它仅控制单个元素宽高的计算方式，不参与列间高度同步；等高需依赖flex或grid的align-items: stretch拉伸机制。
单纯靠CSS盒模型（box-sizing、margin、padding、border）无法实现等高列布局——它只控制单个元素的尺寸计算方式，不参与列间高度同步。
为什么box-sizing: border-box不能让列等高
box-sizing: border-box只是把padding和border纳入width/height计算，避免宽度溢出；但它对“多列中哪一列更高”毫无影响。即使所有列都设了box-sizing: border-box，内容长短不同，渲染高度依然不同。
常见错误现象包括：
- 三列并排，中间列文字多，明显高出左右两列
- 加了
height: 100%但父容器height是auto，结果全部塌成一行高 - 误以为
padding-bottom: 9999px; margin-bottom: -9999px这类 hack 是盒模型能力——其实这是利用视觉欺骗，且在现代布局中早已失效
真正起作用的是 Flex 或 Grid 的拉伸机制
等高列不是靠“算尺寸”，而是靠容器主动拉伸子项。关键不在盒模型，而在布局模型是否启用align-items: stretch（Flex）或align-items: stretch + 行轨道约束（Grid）。
实操建议：
- 父容器必须设
display: flex或display: grid，box-sizing只是辅助，不是主角 - 子项禁用
height、max-height、min-height: 0（尤其旧 Safari 下min-height: 0会直接关掉拉伸） - 含图片的列要加
img { height: 100%; object-fit: cover; }，否则原始尺寸破坏拉伸基准 - 响应式换行时，
flex-wrap: wrap只保证每行内等高，跨行不拉齐；真要全局等高，必须切到display: grid并配grid-auto-rows: minmax(0, 1fr)
哪些盒模型相关样式会悄悄破坏等高
看似安全的盒模型设置，实际常成为等高失效的隐形推手：
-
margin-bottom: auto在 Flex 子项里会中断拉伸行为，导致该列高度回归内容高度 -
position: absolute让子项脱离文档流，不再参与stretch计算，父容器高度可能塌陷 -
display: table-cell虽能视觉等高，但语义错误、响应式断裂，且box-sizing对其无效 - 未重置的全局
* { min-height: 0; }可能被继承到子项，意外关闭拉伸
最易被忽略的一点：等高是容器层面对齐，不是内容层面对齐。拉伸后某列底部留白、另一列文字溢出，问题不在 Flex 或 Grid，而在子项内部没做内容分布控制——比如该用margin-top: auto推按钮到底部，而不是反复调align-items。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
