box-sizing 属性控制 width/height 是否包含 padding 和 border，默认 content-box，设为 border-box 则总宽固定；老项目在 Chrome 中“变窄”实为未重置 box-sizing 导致跨浏览器不一致。
box-sizing 属性决定宽度计算逻辑
元素的 width 和 height 到底包不包括 padding 和 border，不是由浏览器“随意实现”的，而是由 box-sizing 属性控制。现代浏览器全部支持该属性，且默认值统一为 content-box。
这意味着：width: 200px 指的是内容区宽 200px，加上 padding: 10px 和 border: 1px 后，元素实际占位宽度是 200 + 2×10 + 2×1 = 222px。
若设为 box-sizing: border-box，则 width: 200px 表示整个盒子（内容 + 内边距 + 边框）总宽 200px，内容区会自动收缩让出空间。
-
content-box：标准 W3C 盒模型，也是默认行为 -
border-box：IE5.5–8 的传统盒模型，现被广泛用于重置布局 -
inherit/initial等值极少用，无需强记
为什么老项目在 Chrome 里看起来“变窄”了
这不是浏览器差异，而是开发者误以为 IE6/7 的 border-box 是“标准”，并在未重置的情况下直接写 width: 100% + padding，结果在现代浏览器中溢出容器。
立即学习“前端免费学习笔记（深入）”；
典型现象：div { width: 100%; padding: 20px; } 在 Chrome 中撑破父容器，在旧 IE 中刚好填满——本质是 box-sizing 默认值没被显式声明，导致跨浏览器表现不一致。
- 没有全局重置时，不同框架或 CMS 可能自带
box-sizing: border-box，造成局部混乱 -
* { box-sizing: border-box; }是安全的，但会影响、等原生控件的默认尺寸，建议用html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; } - Flex/Grid 容器子项默认不受
box-sizing影响其主轴尺寸计算，但依然影响自身渲染占位
calc() 与 box-sizing 共存时的优先级
calc() 计算的是最终生效的 width 值，它发生在 box-sizing 解析之后。也就是说，calc(100% - 40px) 得到的结果，仍会按当前 box-sizing 规则决定是否包含内边距和边框。
div {
width: calc(100% - 40px);
padding: 10px;
border: 2px solid #000;
box-sizing: border-box; /* 此时 calc 结果即为总宽 */
}如果把上面的 box-sizing 改成 content-box，那 calc() 算出的仍是内容区宽度，总宽还要额外加 24px。
-
calc()不改变盒模型类型，只提供更灵活的长度值 - 不要在
border-box下再用calc()手动减去padding和border，否则会重复扣除 - 百分比宽度在嵌套 flex 容器中可能因基线不同而偏差，此时
calc()未必比flex: 1更可靠
display: inline-block 与盒模型的隐式交互
行内块元素受 white-space 和字体度量影响，其 vertical-align 默认为 baseline，会导致看似“多出间隙”，容易被误认为是盒模型计算错误。
真实问题不在 box-sizing，而在渲染上下文：行内格式化上下文中，line-height 和 font-size 会影响基线对齐位置，从而让 margin 或 padding 显得“不对称”。
- 设置
font-size: 0在父容器上可消除间隙，但需在子元素中重置字体大小 - 改用
float: left或display: flex是更干净的替代方案 -
box-sizing对inline-block依然生效，只是它的高度计算还牵扯line-height，容易掩盖真正问题
实际开发中最容易忽略的，是把“视觉错觉”当成“盒模型 bug”。比如看到两个并排 div 高度不一致，第一反应不该是查 box-sizing，而是检查 vertical-align、line-height、是否触发 BFC，以及有没有隐藏的换行符或空格。
