根本原因不是写错，而是浏览器按content-box盒模型计算——width仅内容区，padding和border额外叠加；flex子项width不生效因受flex-basis和flex-shrink影响；表格width失效因table-layout:auto优先按内容撑开；绝对定位和inline元素width无效需调整display或定位方式。
根本原因不是你写错了，而是浏览器按 content-box 盒模型算的——width 只管内容区，padding 和 border 是额外加在外面的。
box-sizing 默认是 content-box，不是你想象的“总宽”
比如写了 .item { width: 200px; padding: 12px; border: 2px solid #333; }，实际占位是 200 + 12 + 12 + 2 + 2 = 228px。这不是 bug，是 W3C 标准行为。不同元素（如 input、div）可能继承了不同默认 box-sizing，尤其表单控件在某些浏览器里仍保持 content-box，导致并排时明显不齐。
- 用开发者工具选中元素，在 “Computed” 面板直接看
box-sizing值，别猜 -
input、textarea、select建议显式设box-sizing: border-box，别依赖全局重置 - 第三方 UI 库（如旧版 Element UI）可能内部依赖
content-box，全局* { box-sizing: border-box; }会破坏其内边距表现
flex 子项写了 width 却不生效
在 display: flex 容器里，width 只是参考值，真正起效的是 flex-basis；如果没设，浏览器按内容宽度推导，再被 flex-shrink 压缩，视觉上就“变窄了”。
- 想固定宽度：用
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 避免同时写
width和flex-basis，后者优先级更高，容易覆盖预期 -
min-width: 0要配合flex-basis: 0使用，否则图片或文本可能撑开容器
表格里 td 或 th 的 width 不起作用
表格列宽受多重因素干扰：table-layout: auto（默认）下，浏览器优先按内容撑开，width 只当建议值；th 宽度还会影响同列所有 td。
- 强制按声明宽度布局：给
table加table-layout: fixed，且必须配width（如width: 100%或具体像素值） -
th和td的width要统一设在相同层级选择器下，避免被父级col或colgroup覆盖 - 内容溢出时，
overflow: hidden+text-overflow: ellipsis比硬调width更可靠
绝对定位或 inline 元素让 width 失效
position: absolute 的元素，width 相对于最近的定位祖先，不是视口；而 span 这类 display: inline 元素，width 和 height 完全无效。
- 绝对定位元素想按视口百分比宽：加
left: 0; right: 0;替代width: 100% - 要对
span设宽高，必须先改display：用inline-block或block，但注意换行行为变化 - 浮动元素未清除会导致父容器塌陷，子元素
width失去参照系，优先用flex或grid替代浮动布局
真正麻烦的从来不是 box-sizing 本身，而是它只管自己这一层计算——父容器布局方式、子元素类型、第三方样式覆盖、甚至设备像素比（DPR）都可能让最终渲染偏离预期。动手前，先打开开发者工具看“Computed”和“Layout”，比反复试数值更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
