box-sizing: border-box 改变的是宽高计算逻辑，使 width/height 包含 padding 和 border，确保元素最终可见尺寸等于设定值，避免因内边距和边框导致的布局错位。
box-sizing: border-box 改变的是什么计算逻辑
它让 width 和 height 直接控制元素的「最终可见尺寸」，而不是内容区尺寸。默认的 content-box 下，width: 200px + padding: 10px + border: 2px = 实际占位 224px；而 border-box 下，这三者全部被“压缩”进 200px 内部。
为什么全局设成 border-box 是主流做法
避免反复手动减去 padding 和 border 值，尤其在响应式布局、栅格系统、表单控件对齐等场景下，能大幅降低宽度错位概率。几乎所有现代 CSS 框架（如 Bootstrap、Tailwind）都默认启用它。
- 推荐写法：
*, *::before, *::after { box-sizing: border-box; } - 不建议只对个别元素设置，容易遗漏或冲突
- 注意：伪元素也必须显式包含，否则可能破坏 ::before/::after 的尺寸预期
border-box 在 flex/grid 容器里是否还重要
仍然重要，但作用方式略有不同。flex item 默认会拉伸或收缩以适应容器，box-sizing 不影响 flex 分配逻辑，但会影响该元素自身内部的 padding/border 是否“撑开”内容区——比如一个 flex: 1 的输入框，若用 content-box，加 padding 后文字可能被截断；用 border-box 就不会。
- 常见误判：以为用了 flex 就不用管
box-sizing，结果表单控件左右不对齐 -
input、textarea等原生控件默认是content-box，务必重置 - 某些 reset.css（如 Normalize.css）已处理，但不是所有项目都引入
兼容性与潜在副作用
box-sizing: border-box 在 IE8+、所有现代浏览器中完全支持，无兼容问题。唯一要注意的是：当元素有 min-width 或 max-width 时，它们约束的是「最终盒尺寸」，不是内容区——这点和 content-box 行为一致，但容易被忽略。
- 副作用示例：设了
width: 100%; padding: 20px; box-sizing: border-box;，再加min-width: 300px，那这个元素最小就是 300px，内部内容区可能只剩 260px - 动画中如果动态切换
box-sizing，会导致 layout thrashing，应避免 - 调试时可临时用 DevTools 的 Layout 面板查看“Computed Box Sizing”，确认是否生效
实际开发中最容易漏掉的是表单控件和第三方组件内部的盒子模型，它们往往自带样式且未重置 box-sizing，导致和周边布局不一致。遇到宽度对不齐，先查 box-sizing 是否真正统一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
