css盒模型如何计算一个包含内边距的按钮宽度_使用box-sizing和padding计算宽度-css教程

box-sizing: border-box 使 width 包含 padding 和 border，设为该值后按钮总宽即为指定宽度，内容区自动压缩；推荐全局设置 * { box-sizing: border-box; }，调试应以盒模型图示或 getBoundingClientRect() 为准。

box-sizing: content-box 是默认行为，宽度只算内容区

浏览器默认用 content-box，这时候你写 width: 100px，实际总宽度 = 100px + 左右 padding + 左右 border。按钮加了 padding: 12px 20px，左右内边距共 40px，再加个 border: 2px solid #ccc（左右边框 4px），最终按钮占位就是 144px，超出预期。

常见错误现象：明明设了 width: 100% 或固定像素，按钮却撑出容器、换行、或和相邻元素对不齐。

• 使用场景：需要按钮严格贴合父容器宽度，或做栅格布局时横向等宽排列
• 解决办法：直接在按钮上加 box-sizing: border-box
• 兼容性无风险：border-box 在所有现代浏览器及 IE8+ 都支持

box-sizing: border-box 让 width 包含 padding 和 border

设为 border-box 后，width 指的是“从左 border 边到右 border 边”的总宽。内边距和边框不再额外加进去，而是从这个宽度里“挤出来”。比如：

button {
  width: 100px;
  padding: 12px 20px;
  border: 2px solid #ccc;
  box-sizing: border-box;
}

此时按钮总宽度就是 100px，内容区实际只有 100px − 40px − 4px = 56px 宽 —— 但你不用手动算，浏览器自动分配。