通过合理运用CSS盒模型的width和height属性与transition结合，可实现按钮悬停扩展、卡片展开及响应式容器平滑缩放等动画效果，提升界面交互性与视觉流畅度。
在网页设计中，CSS盒模型是构建页面布局的基础，而CSS动画则让界面更具交互性和视觉吸引力。将盒模型的尺寸属性（如 width 和 height）与 transition 结合使用，可以实现平滑的大小变化效果，提升用户体验。下面通过实际场景讲解如何有效应用。
理解盒模型与尺寸过渡的基本原理
CSS盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。当我们对 width 或 height 使用 transition 时，浏览器会在属性值改变时自动插值，形成动画效果。
关键点：
- transition 需要指定目标属性，例如 transition: width 0.3s ease;
- 初始状态和最终状态必须是可计算的尺寸（不能是 auto 到具体数值的直接过渡，需技巧处理）
- 块级元素默认 width 为 100%，设置固定值或百分比更利于控制动画
实现按钮悬停展开效果
常见于导航按钮或卡片交互，鼠标悬停时宽度缓慢扩展，突出当前项。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.button {
width: 100px;
height: 40px;
background: #007bff;
color: white;
text-align: center;
line-height: 40px;
transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden;
}
.button:hover {
width: 150px;
}
说明：cubic-bezier 曲线让动画更自然，overflow: hidden 防止内容溢出影响布局。
卡片展开显示更多信息
点击卡片后，height 从固定值过渡到自适应高度，展示隐藏内容。
技巧：由于 height: auto 不支持过渡，可用以下方法模拟：
- 设置一个足够大的 max-height 代替 height
- 配合 opacity 或 transform 增强视觉效果
示例：
.card {
width: 200px;
max-height: 100px;
overflow: hidden;
background: #eee;
transition: max-height 0.5s ease;
}
.card.expanded {
max-height: 500px;
}
JavaScript 控制类名切换即可触发动画。注意 max-height 值不宜过大，避免动画持续时间过长。
响应式容器平滑缩放
在不同屏幕尺寸下，通过媒体查询改变 width/height，并搭配 transition 实现流畅适配。
例如：
.responsive-box {
width: 100%;
height: 200px;
background: linear-gradient(to right, #667eea, #764ba2);
transition: width 0.3s ease, height 0.3s ease;
}
@media (min-width: 768px) {
.responsive-box {
width: 50%;
height: 300px;
}
}
当窗口宽度变化时，容器尺寸会平滑过渡，避免突兀跳变。
基本上就这些。掌握 width 和 height 与 transition 的结合，能让你的界面动效更细腻。关键是合理设置起始状态、选择合适的过渡时间和缓动函数，并注意 auto 值的限制。不复杂但容易忽略细节。
