使用box-sizing: border-box可精准控制卡片尺寸，使width包含padding和border，避免布局溢出。配合padding调节内容间距，border设置轮廓，结合max-width和百分比实现响应式自适应，确保卡片在不同屏幕下稳定显示。
在CSS中调整卡片组件的尺寸，核心是理解并控制盒模型。默认情况下，元素的尺寸由内容区域、内边距（padding）、边框（border）和外边距（margin）共同决定。通过合理设置这些属性，可以精确控制卡片的整体大小和布局表现。
理解标准盒模型与替代盒模型
浏览器默认使用标准盒模型：当你给一个元素设置 width: 200px; height: 100px; 时，这个尺寸仅指内容区域。如果添加 padding 或 border，实际占用空间会更大。
例如：- width: 200px
- padding: 10px → 左右各10px，总宽度变为 200 + 20 + 2×border
- border: 2px solid → 再增加4px边框
- 最终宽度 = 200 + 20 + 4 = 224px
这会导致布局超出预期。为避免这种情况，推荐使用替代盒模型（也叫 border-box 模型）：
* {
box-sizing: border-box;
}设置后，width 和 height 包含了 padding 和 border，内容区域会自动压缩。这样设置 width: 200px 的卡片，无论加多少内边距或边框，总宽度始终是200px，更利于布局控制。
立即学习“前端免费学习笔记（深入）”；
通过 padding 控制内部留白
卡片内容与边缘之间的距离由 padding 决定。适当设置 padding 可提升可读性和视觉舒适度。
.card {
width: 300px;
padding: 20px;
}配合 box-sizing: border-box 后，padding 不会撑大整体宽度，内容区域自动缩小，确保卡片尺寸稳定。
利用 border 控制轮廓但不破坏布局
卡片常需要边框来区分边界。使用 border 时，若未启用 border-box，边框会额外增加尺寸。
正确做法：
.card {
box-sizing: border-box;
width: 280px;
border: 2px solid #ddd;
padding: 16px;
}此时 width 已包含 border 和 padding，整体宽度严格保持 280px。
响应式场景下的尺寸控制建议
在响应式设计中，避免固定宽高，改用 max-width 配合百分比：
.card {
box-sizing: border-box;
width: 100%;
max-width: 320px;
margin: 10px auto;
padding: 16px;
border: 1px solid #eee;
}这样卡片在小屏幕上自适应缩放，大屏幕上不超过最大宽度，同时内边距和边框不会导致溢出父容器。
基本上就这些。关键在于统一使用 box-sizing: border-box，并清晰区分 content、padding、border 的作用。只要掌握这一点，卡片尺寸就能精准可控。
