box-sizing 的核心是让 width/height 表达总尺寸而非仅内容区；默认 content-box 导致 padding/border 额外增加宽度，border-box 则将 padding/border 包含在设定尺寸内，推荐全局设置 * { box-sizing: border-box; }。
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 开头加这一行，能一劳永逸避免多数尺寸意外：
* { box-sizing: border-box; }- 它作用于所有元素（包括
<input>、<select></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></button>高度设成一样，却因默认padding不同而错位
这些问题，加一行 * { box-sizing: border-box; } 基本都能绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
