使用box-sizing: border-box可精确控制尺寸，width和height包含content、padding和border，避免因标准盒模型中padding和border额外增加导致溢出，结合max-width、min-height等实现响应式布局。
在CSS中，height 和 width 属性是控制盒子尺寸的核心工具。要实现精确控制，必须理解它们的计算方式以及与其他盒模型属性的关系。
理解盒模型的基本结构
每个元素在页面中都表现为一个矩形盒子，由以下几部分组成：
- content：内容区域，即 height 和 width 设置的实际范围
- padding：内边距，内容与边框之间的空间
- border：边框，围绕内容和内边距的线条
- margin：外边距，盒子与其他元素之间的空白
默认使用的是标准盒模型，此时设置的 width 和 height 只包括 content，不包含 padding 和 border。
使用 box-sizing 统一尺寸计算方式
为了更直观地控制总尺寸，推荐将盒模型改为 border-box：
立即学习“前端免费学习笔记（深入）”；
div {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
}
在这种模式下，width 和 height 包含了 content、padding 和 border。上面的例子中，整个盒子实际占用的宽度就是 200px，不会因为 padding 和 border 超出预期。
避免尺寸溢出的常见问题
在标准盒模型下，容易因忽略 padding 和 border 导致实际尺寸大于设定值：
.box {
width: 100px;
padding: 10px;
border: 5px solid red;
}
这个元素的实际宽度为：100 + 2×10 + 2×5 = 130px。若需保持总宽为 100px，则需手动调整 content 宽度，或直接使用 box-sizing: border-box 避免计算错误。
结合 max-width、min-height 等增强控制力
除了固定尺寸，还可以使用弹性尺寸属性来提升响应性：
- max-width：限制最大宽度，防止内容撑开过大
- min-height：确保盒子至少有一定高度，避免内容少时塌陷
- overflow：配合使用，处理内容超出的情况
例如：
.container {
width: 100%;
max-width: 800px;
min-height: 200px;
box-sizing: border-box;
}
这样既保证了响应式布局，又精确控制了最大最小范围。
基本上就这些。关键在于统一使用 box-sizing: border-box，并清楚知道你设置的 width 和 height 到底包含哪些部分。只要掌握这一点，就能精准控制每一个盒子的尺寸表现。
