box-sizing: border-box 能解决宽高计算混乱，因其使 width/height 包含 padding 和 border，避免内容区、内边距与边框叠加导致溢出；需显式设置表单控件及伪元素，并注意 margin collapse 等独立渲染规则。
box-sizing: border-box 为什么能解决宽高计算混乱
默认的 content-box 模式下，设置 width: 200px 只管内容区，padding 和 border 会额外加出去，导致实际占位超预期。改成 border-box 后，width 和 height 就真真正正表示“整个盒子的最终尺寸”，padding 和 border 往里挤，不撑大容器。
常见错误现象：div { width: 100%; padding: 16px; } 在父容器中溢出；表单控件（如 input）加了 padding 后宽度失控；栅格布局列宽总和超过 100%。
- 全局重置推荐写法：
* { box-sizing: border-box; }，但注意它会影响伪元素（::before/::after），必要时需单独重置 - 更稳妥的写法是：
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }，确保继承链清晰 - 某些 UI 库（如 Bootstrap 5+）已内置该重置，重复声明不会报错，但可能干扰调试逻辑
哪些元素默认不继承 box-sizing
box-sizing 默认不是继承属性，即使父元素设了 border-box，子元素仍按自身 computed 值计算——尤其是表单控件，它们在不同浏览器中有自己的默认样式。
使用场景：封装可复用的输入框组件、做跨浏览器表单对齐、嵌套 flex/grid 布局时子项尺寸突变。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置：
input, textarea, select, button { box-sizing: border-box; } - SVG 元素（如
rect,circle）不支持box-sizing，别白费劲 - 替换元素（
img,iframe）虽支持该属性，但实际渲染受 intrinsic size 影响更大，box-sizing对它们意义有限
flex 或 grid 容器里的 box-sizing 还重要吗
重要，而且容易被忽略。flex item 和 grid item 的尺寸分配逻辑（比如 flex-basis 或 grid-template-columns）仍然基于各自的盒模型解析结果。如果 item 是 content-box，它的 width + padding + border 仍可能破坏布局节奏。
性能影响几乎为零，但兼容性要注意：IE9+ 支持 box-sizing，IE8 及以下不支持且无 polyfill 方案。
- 在 flex 容器中，若 item 设置了
flex: 1，它的基础尺寸仍由box-sizing决定——border-box下更易预测最终宽度 - grid 中用
fr单位时看似与盒模型无关，但一旦混用固定值（如200px）+padding，content-box就会让内容区被压缩甚至换行 - 不要依赖
calc()补救，比如width: calc(100% - 32px)，这会让 CSS 更难维护，也增加出错概率
修改 box-sizing 后 margin 不生效？检查是否误触 collapse 规则
改变 box-sizing 本身不会影响 margin 行为，但很多人改完发现外边距“消失”了，其实是触发了 margin collapse —— 特别是父子元素间垂直方向的 margin 合并，在 border-box 下更容易暴露，因为容器高度变“实在”了，collapse 现象反而更明显。
典型场景：卡片组件内部有标题和内容，顶部 margin-top 没反应；模态框弹出后内容区上移一截。
- 验证方法：给父容器加个
border: 1px solid transparent或padding: 0.1px，看 margin 是否恢复 - 更干净的解法是避免依赖 margin 来控制父子间距，改用
gap（flex/grid）、padding或margin-block - 注意：
box-sizing: border-box对 margin-collapse 无任何干预能力，这是独立的渲染规则，别指望它“顺带修好”
事情说清了就结束。最常被漏掉的是表单控件和伪元素的显式声明，还有以为用了 flex/grid 就不用管盒模型——其实只是把问题藏得更深了。
