box-sizing 属性值有 content-box 和 border-box 两种（inherit 基本不用）：content-box 下 width/height 仅指内容区，总宽=width+padding+border；border-box 下 width/height 包含 padding 和 border，内容区自动收缩。
box-sizing 属性值有哪些，各自怎么算宽高
默认是 content-box：你写 width: 200px，实际占位就是内容区 200px，再加上 padding 和 border 才是真实宽度；border-box 则相反：200px 是整个盒子总宽（含 padding + border），内容区会自动收缩。
只有两个合法值：content-box 和 border-box（还有个 inherit，但基本不用）。
常见错误现象：display: flex 下子元素设了 width: 50%，但加了 padding: 10px 后溢出容器——这就是 content-box 在“老实干活”。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 需要精确控制容器总尺寸（比如栅格系统、卡片固定宽度）
- 表单控件统一高度（
input、select加了border和padding后高度不一致） - 响应式布局中避免媒体查询反复调整 padding/border
全局切换盒模型：为什么推荐 * { box-sizing: border-box }
不是为了“炫技”，而是解决历史遗留的不一致问题。浏览器默认对所有元素用 content-box，但开发者写样式时往往直觉认为“我设的 width 就是它占的地方”。
性能和兼容性没问题：box-sizing 是 CSS3 属性，IE8+ 全支持，且不影响渲染性能。
但要注意两点：
-
* { box-sizing: border-box }必须放在所有其他样式之前，否则可能被后续规则覆盖 - 某些第三方 UI 库（如早期 Bootstrap 3）内部依赖
content-box，全局设置后需检查 input、button 等是否变形 - 伪元素也要显式重置：
::before, ::after { box-sizing: border-box }，否则可能意外继承父级计算方式
局部覆盖或例外处理：什么时候不该用 border-box
不是所有地方都适合一刀切。比如自定义滚动条 thumb、某些 SVG 内嵌图形、或需要严格按 content 区域做 JS 测量的组件。
常见错误现象：用 getBoundingClientRect() 获取元素尺寸后，发现和 CSS 宽高对不上——很可能是因为 JS 拿到的是 content 区大小，而样式用了 border-box。
这时候可以：
- 对特定元素手动切回：
.legacy-input { box-sizing: content-box } - 用
calc()补偿：width: calc(200px - 20px)（当已知 padding 总和为 20px） - JS 中统一用
element.offsetWidth（返回 border-box 总宽），而不是getComputedStyle(el).width（返回 content 宽）
和 flex/grid 布局搭配时的关键细节
box-sizing 不影响 flex 或 grid 的分配逻辑，但它直接影响“每个项最终渲染多大”。比如 flex: 1 分配剩余空间，如果子项有 padding，border-box 下内容区自动压缩，content-box 下则可能撑破容器。
容易被忽略的点：
-
min-width/max-width的参照基准始终是 content 区，无论box-sizing是什么 - grid-template-columns 中的
fr单位不受影响，但显式像素值列（如200px）仍受box-sizing影响 - 设置
box-sizing: border-box后，width: 100%的子元素在父容器有 padding 时，仍会超出——因为 % 是相对于父 content 区计算的，不是父总宽
事情说清了就结束。
