box-sizing: content-box 是浏览器默认盒模型，width 仅指内容区宽度，padding 和 border 额外增加，易致布局溢出；而 border-box 将 width 视为边框总宽，更符合现代布局直觉。
box-sizing: content-box 是什么，为什么它会让布局“算不准”
浏览器默认用 content-box，意思是：你写的 width: 200px 只管内容区，padding 和 border 全是“额外加的”。这导致实际占位比你写的宽一大截——尤其在做栅格、表单或等宽卡片时，很容易横向溢出、换行错乱。
- 常见错误现象：
input设了width: 100%+padding: 8px+border: 1px，结果撑破父容器，滚动条突然出现 - 使用场景：极少主动用；只在需要严格分离“内容尺寸”和“装饰尺寸”的极少数 UI 组件（如可缩放文本框内部 content 区）中保留
- 参数差异：不写
box-sizing就是content-box；显式写box-sizing: content-box等价于没写
box-sizing: border-box 才是现代布局的实际标准
border-box 把你写的 width 当成“从左 border 到右 border 的总宽度”，padding 和 border 不再往外撑，而是往里挤内容。这是目前所有主流 UI 库（Bootstrap、Tailwind、Ant Design）和响应式项目的默认选择。
- 实操建议：全局重置，一行解决后患：
* { box-sizing: border-box; } - 兼容性影响：IE8+ 全支持，无需 polyfill；移动端 Safari/Chrome/Android Webview 均无问题
- 性能无损耗：
box-sizing是渲染层计算逻辑切换，不触发重排或重绘
为什么 margin 始终不参与 width/height 计算
无论 content-box 还是 border-box，margin 都游离在盒模型尺寸之外——它不进 width，也不进 height，只影响外侧定位和相邻元素间距。这点常被误读，以为设了 margin 就会改变盒子“大小”。
- 容易踩的坑：给
div设width: 200px; margin: 20px;，误以为总宽是 240px；实际总占用水平空间 = 200px（盒宽）+ 40px（左右 margin），但200px仍是盒子自身的 width 值 - 使用场景：垂直居中、兄弟元素间隔、脱离文档流后的偏移控制——这些都依赖 margin 的“外部作用力”特性
真实项目中怎么查和改盒模型
Chrome DevTools 里直接看：选中元素 → 右侧 Computed 标签页 → 拉到最底找 box-sizing 值；或者悬停在元素上，右侧 Styles 里搜 box-sizing。
立即学习“前端免费学习笔记（深入）”；
- 调试技巧：如果某元素莫名变宽，先检查是否被父级或 reset.css 覆盖了
box-sizing；特别是用了第三方组件库时，它们可能已设为border-box，而你局部覆盖回content-box就容易失守 - 例外注意：
table、button、select等原生表单控件在部分旧版 Safari 中对border-box支持不稳定，需单独测试
实际开发中，border-box 是默认安全选项，但别忘了它只管 content/padding/border 三层；margin 的“不可见扩张性”和某些表单元素的隐式行为，才是更常绊倒人的地方。
