<p>默认 box-sizing 为 content-box，width/height 仅含内容区，padding/border 会额外增加尺寸；改用 border-box 后 width/height 表示整体占位尺寸（content+padding+border），推荐全局设置 * { box-sizing: border-box; }。</p>

默认情况下，CSS 的 box-sizing 是 content-box，这意味着你设置的 width 和 height 只包含内容区域，而 padding 和 border 会额外增加元素的总尺寸。这常导致布局错位、容器溢出或响应式失效。

用 border-box 统一盒模型

将盒模型切换为 border-box 后，width 和 height 就表示元素的**整体占位尺寸**（含 content + padding + border），内边距不再“撑大”盒子。

• 写法：box-sizing: border-box;
• 推荐全局设置，避免逐个添加：

* { box-sizing: border-box; }

这样所有元素（包括伪元素）都按 border-box 计算，后续设置 width: 100% 或固定像素时更可预期。

注意继承与重置

box-sizing 不会自动继承，但通过通配符 * 设置后，子元素会沿用该值。不过某些组件库或重置样式（如 Normalize.css）可能已显式设为 content-box，需检查并覆盖。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

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

• 若局部需要 content-box（极少见），可手动重设：box-sizing: content-box;
• 表单控件（如 input, textarea）在部分浏览器中默认是 content-box，建议统一重写

配合 calc() 灵活微调

即使用了 border-box，有时仍需精确控制内容区宽度（比如留出固定 padding 后填满父容器）。可用 calc() 辅助：

width: calc(100% - 20px); /* 减去左右各10px padding */

但更推荐直接设 padding，再让 width: 100% 自动适配——因为 border-box 已把 padding 算进去了，无需手动减。

验证是否生效

在浏览器开发者工具中选中元素，查看“Computed”面板里的 box-sizing 值；同时观察“Metrics”面板：当 padding 增加时，若 width 对应的蓝色区域（总宽度）不变，说明 border-box 已生效。

• 常见误判：只看 Styles 面板写了 box-sizing: border-box，但被更高优先级规则覆盖
• 调试技巧：临时加个 border: 1px solid red，直观感受 padding 是否还在“撑开”盒子