<p>box-sizing 的核心是让 width/height 表达总尺寸而非仅内容区；默认 content-box 导致 padding/border 额外增加宽度，border-box 则将 padding/border 包含在设定尺寸内，推荐全局设置 * { box-sizing: border-box; }。</p>

HTML 和 CSS 结合使用 box-sizing，核心是让元素的 width 和 height 表达的是你“想看到的总尺寸”，而不是仅内容区大小。默认行为容易导致布局错位，而正确设置 box-sizing 能直接解决这个问题。

理解两种盒模型计算方式

浏览器默认用 content-box：你写 width: 200px，实际占位是 200px + padding×2 + border×2。加个 padding: 10px 和 border: 1px，总宽就变成 222px——这常让 100% 宽度的盒子撑出父容器。

换成 border-box 后，width: 200px 就是最终总宽度，padding 和 border 会从这 200px 里“往里扣”，内容区自动变窄。设计稿上标“宽 200px”，代码设了就是 200px，所见即所得。

推荐全局统一设置

在 CSS 开头加这一行，能一劳永逸避免多数尺寸意外：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• * { box-sizing: border-box; }
• 它作用于所有元素（包括 <input>、<select> 等表单控件）
• 尤其利于 Flex/Grid 布局、响应式断点和 calc() 计算（比如 width: calc(100% - 20px) 不会因 padding 溢出）

针对特定元素灵活调整

有些场景需要保留默认行为，比如想让边框“撑开”内容区，或兼容旧组件库时，可单独覆盖：

• 给某个 div 用标准模型：.legacy-box { box-sizing: content-box; }
• 表单控件对齐难？直接设：input, select, button { box-sizing: border-box; }
• 注意：JavaScript 的 offsetWidth / offsetHeight 返回值会随 box-sizing 改变，取值逻辑保持一致

实际布局中容易踩的坑

不设 box-sizing: border-box 时，常见问题有：

• 100% 宽度的卡片加了 padding，立刻横向滚动
• 多个并列 div 各设 width: 50%，但因 border 导致换行
• <input type="text"> 和 <button> 高度设成一样，却因默认 padding 不同而错位

这些问题，加一行 * { box-sizing: border-box; } 基本都能绕过。