百分比宽度在border-box下算不准，因box-sizing仅改变尺寸归属逻辑，不改变百分比基准（仍基于父容器content box宽度），且受父容器padding、margin、gap、滚动条、BFC及单位混用等多重因素干扰。
百分比宽度在border-box下为什么还是算不准
因为box-sizing: border-box只改变盒模型的尺寸归属逻辑（把padding和border纳入width内），但不改变百分比计算的基准——它依然基于父容器的content box宽度。如果你设了width: 50%，又加了border: 2px，浏览器确实会把border塞进这50%里，但前提是父容器没滚动条、没padding干扰，且你没用flex/grid等新布局打乱默认流。
常见错误现象：div设了width: 50% + border: 1px solid，两个并排却换行；或者用calc(50% - 2px)后反而留白——那多半是父容器有padding或自身有margin没归零。
- 确认父容器是否设置了
padding：它不会被border-box吸收，会压缩子元素可用宽度 - 检查是否意外触发了BFC（比如
overflow: hidden），导致百分比计算时参考了错误的包含块 - 避免在flex容器里混用
width: 50%和flex: 1，后者优先级更高，前者可能被忽略
calc(50% - 2px)失效的几种真实原因
calc()本身没问题，失效往往来自单位混用或计算上下文错位。比如写成calc(50% - 2)（漏了px）会直接被忽略；更隐蔽的是，在transform: scale(0.9)后的元素上用calc()，百分比仍按原始尺寸算，不是缩放后的。
使用场景：需要精确避开固定边框/阴影宽度，又不能改box-sizing（比如第三方组件不允许覆盖）。
- 必须写全单位：
calc(50% - 2px)✔️，calc(50% - 2)❌ - 如果边框是响应式的（比如
border-width: 0.1rem），对应写calc(50% - 0.1rem)，别混用px和rem - 在CSS自定义属性中用
calc要小心：变量值若不含单位（如--border: 2），calc(50% - var(--border))会失败
border-box + 百分比在Flex布局里的表现差异
Flex项的width: 50%在flex-direction: row下通常能撑满一行，但一旦父容器设了gap: 8px，两个50%的项就会被挤出容器——gap不参与百分比计算，也不被border-box包含。
性能影响几乎为零，但兼容性要注意：gap在旧版Safari中需-webkit-gap前缀，而calc()在IE11中支持有限（不支持calc(50% - 2px)中的空格省略写法）。
- Flex容器中，优先用
flex: 1代替width: 50%，更健壮 - 若必须用百分比+边框，给父容器加
padding预留空间，比反复调calc更可控 - 不要依赖
border-box来“修复”flex项溢出：它解决不了gap或margin带来的额外宽度
真正该检查的三个地方，而不是改box-sizing
遇到百分比宽度+边框对不齐，90%的情况跟box-sizing无关，而是布局上下文被悄悄改变了。
- 父元素是否有
font-size: 0？它会让inline-block元素间的空格变成实际宽度，干扰百分比计算 - 自己有没有
margin？哪怕margin-right: 0显式写了，也可能被其他规则覆盖，用DevTools的Computed面板看最终值 - 是否启用了
scrollbar-gutter或强制滚动条（overflow: scroll）？滚动条宽度会吃掉父容器可用宽度，让50%变窄
复杂点在于：这些因素可以叠加。比如一个flex容器设了gap，子项用了border-box和calc，同时父容器还有滚动条——这时候单改任何一个都救不回来，得一层层剥开看渲染树的实际尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
