computed width 值与CSS所写不一致说明width被覆盖或未生效，常见原因包括display类型不支持、flex布局中flex-basis优先、max/min-width限制、transform/zoom影响、box-sizing及padding/border占用、浏览器缩放、outline验证偏差、父容器flex-shrink或百分比失效等。
看 computed width 值是否和你写的值一致
直接打开浏览器开发者工具，选中元素，在右侧面板切换到 Computed 标签页，找到 width 这一项。如果这里显示的数值和你 CSS 里写的不一致（比如写了 width: 200px，但 computed 是 184px 或 auto），说明 width 已被覆盖或未生效。
常见原因包括：
-
display类型不支持：如display: inline、display: table-cell下width无效 - 父容器是
flex，子项的flex-basis优先级高于width - 存在
max-width或min-width限制，且当前内容/布局触发了截断或拉伸 - 使用了
transform: scale()或zoom，导致视觉尺寸和 computed 值分离
对照盒模型图示确认 padding/border 是否“吃掉”了 width
在 Computed 面板下方，通常有可视化盒模型图（Layout 或 Box Model 子面板），它会用不同颜色标出 content、padding、border、margin 的实际像素值。把它们加起来，再和你写的 width 对比：
- 若总宽 =
width+padding-left+padding-right+border-left-width+border-right-width，说明当前是box-sizing: content-box（默认） - 若总宽 ≈
width，且 padding/border 数值被“挤进”里面，说明是box-sizing: border-box - 如果图示中 padding 或 border 显示为小数（如
9.6px），检查系统/浏览器缩放是否非 100%——Windows 显示比例设为 125% 时，1px 边框常被渲染为 1.25px，再经缩放计算就出现浮点偏差
用 outline 验证真实渲染边界
border 会参与布局、受 box-sizing 影响，而 outline 不参与布局、也不受盒模型控制，纯属“描边”。临时加一句：
立即学习“前端免费学习笔记（深入）”；
outline: 2px dashed #f00;
就能看到元素最终在页面上占了多少物理空间。对比 border 和 outline 的位置差，能立刻判断：
- 如果
outline比border更宽 → 元素被撑开（比如内容溢出、white-space: nowrap） - 如果
outline和border重合但内容被裁 → 检查overflow: hidden或text-overflow: ellipsis - 如果
outline明显窄于预期 → 父容器限制了宽度（如flex-shrink: 1或max-width: 0）
检查父容器是否在“暗中干预”
即使子元素 width 和 box-sizing 都正确，它的实际渲染仍可能被父级“劫持”：
- 父元素是
flex容器且未设flex-shrink: 0→ 子项会被压缩，哪怕写了width: 200px - 父元素没设
width或max-width，子元素用百分比（如width: 50%）→ 百分比失去参照，退化为auto - 父元素用了
float但未清除，导致高度塌陷 → 子元素失去宽度计算基准 - 父元素是
position: absolute且无定位上下文（即最近的position: relative/absolute/fixed祖先缺失）→ 百分比宽度失效
最容易忽略的是那个没写 width 的父 div，或者忘了给 span 加 display: inline-block —— 盒模型从来不是单个元素的事，而是父子之间、显示模式与布局上下文共同作用的结果。
