CSS盒模型入门：用DevTools验证box-sizing

最终效果：border-box宽度包含内边距和边框

设置box-sizing:border-box后，开发者工具中的内容区会自动缩小，使padding和border仍包含在声明宽度内。这通常更适合固定宽度卡片布局。

先建立可测量的卡片样式

第1步：设置明确的宽度与边框

为元素设置width:100px、padding:10px和border:1px solid。暂时不要加入transform或百分比宽度，以免影响初次判断。

在Computed面板读取盒模型

第2步：检查默认content-box

浏览器默认使用content-box，声明宽度只计算内容区，最终占用宽度还要加左右padding和border。打开开发者工具的Computed区域即可看到各层数值。

第3步：切换border-box并比较

增加box-sizing:border-box后刷新观察。若布局仍超出，应继续检查margin、父容器宽度和长文本，而不是重复减小width。

卡片宽度异常时怎样定位

左右溢出：检查padding是否计入宽度。尺寸忽大忽小：查看全局样式是否覆盖box-sizing。文字撑开：处理不可换行内容或设置溢出策略。

把盒模型规则用于实际项目

常见做法是为所有元素及伪元素统一设置border-box，但引入旧组件时仍需用DevTools核对实际计算值，不能假设所有样式都继承一致。