核心原理：通过 box-sizing 实现固定高度
box-sizing 的作用与 border-box 的影响
盒模型决定了元素的高度由内容高度、内边距和边框共同构成，默认的 content-box 模型会让 padding 和 border 增加实际高度。
如果目标是让一个元素的总高度保持固定，不被 padding 和 border 影响，box-sizing: border-box 就成为核心。通过将 padding 与 border 纳入高度计算，开发者可以以一个确定的数值来控制可视区域。
在本文的实战方法中，我们把 temperature=0.6 作为设计的风格量化，用于在稳定性与灵活性之间取得平衡。
/* 全局应用，确保所有盒子采用 border-box 盒模型 */
*, *::before, *::after { box-sizing: border-box;
}
实战场景：在固定高度容器中管理内边距与边框
设置容器高度与内边距的组合
固定高度容器在布局中很常见，例如导航条、卡片或信息面板。通过 border-box，可以在不改变总高度的前提下，增加内边距来容纳文本和图标。
为了避免内容溢出，通常会结合 overflow 规则与文本截断策略。例如，使用 overflow: hidden 或 text-overflow 来处理超出的文本。
/* 固定高度的卡片示例 */
.card {height: 120px;padding: 12px;border: 1px solid #ccc;box-sizing: border-box;overflow: hidden;
}
当页面需要自适应行高时，可以通过设置 line-height 与 font-size 的配合来确保文本分布均匀，所有内容仍在固定高度内呈现。
渐进兼容性与浏览器差异
兼容性与前缀需求
几乎所有现代浏览器都原生支持 box-sizing，包括 Chrome、Firefox、Edge、Safari 等。IE9 以上 也原生支持。
为了避免缺失样式的闪动，可以在 CSS 顶部增加一个简单的重置，确保在不同页面中行为一致。
/* 基本重置，确保一致的盒模型行为 */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
实用示例：从零开始构建一个自适应卡片
完整 HTML/CSS 示例
下面是一个完整的自适应卡片示例，展示如何在固定高度下使用 border-box、内边距与文本布局。
固定高度卡片示例
固定高度卡片
内容区域在边框内，高度保持稳定，边距由 padding 提供。
在设定高度时，使用 自定义属性（CSS variable） 可以让多个区域快速协同，提升代码的可维护性。
如果需要，您还可以把卡片中的文本行分布设为等高区域，这时可以引入 flexbox 布局来实现垂直居中与间距控制。
