使用 box-sizing: border-box 可使元素高度包含 padding 和 border，.box 设置 height: 100px 后，即使添加 padding 和 border，总高度仍为 100px，适用于导航栏、卡片、表单等需固定高度的场景，推荐全局设置 * { box-sizing: border-box } 以统一尺寸计算方式，提升布局可控性。
在CSS中，若要设置盒模型元素的固定高度并结合 height 与 box-sizing 属性实现预期布局效果，关键在于理解不同 box-sizing 值如何影响元素尺寸计算。
理解 box-sizing 的作用
box-sizing 决定了元素的宽度和高度是否包含内边距（padding）和边框（border）：
-
content-box（默认值）：
height仅指内容区域的高度，padding 和 border 会额外增加总高度。 -
border-box：
height包含内容、padding 和 border，更便于控制整体尺寸。
当需要固定元素总高度时，推荐使用 border-box，避免因添加 padding 或 border 导致布局溢出。
设置固定高度并结合 box-sizing
以下是一个实用示例，让一个盒子始终保持 100px 高，无论是否设置 padding：
立即学习“前端免费学习笔记（深入）”；
.box {
height: 100px;
padding: 20px;
border: 5px solid #333;
box-sizing: border-box; /* 总高度仍为 100px */
background: #f0f0f0;
}
使用 box-sizing: border-box 后，内容区会自动压缩，确保整个元素视觉高度正好是 100px。
常见应用场景建议
这类设置特别适合用于：
- 导航栏或页脚固定高度区域
- 卡片组件统一尺寸
- 表单输入框高度一致性控制
统一在全局设置 * { box-sizing: border-box; } 可简化后续开发中的尺寸计算。
基本上就这些。合理使用 height 和 box-sizing 能大幅提升布局可控性，避免意外的高度溢出问题。
