width未生效的首要原因是display类型不支持，如inline元素无视width；其次box-sizing影响宽高计算范围；最后父容器的布局模式（如flex、浮动、定位）会覆盖子元素width设置。
width没生效？先看display是否支持
很多情况下，width根本没机会起作用——因为元素压根不认这个属性。比如 <span></span>、<a></a> 默认是 display: inline，它只按内容撑开，设了 width: 200px 也毫无反应。
- 检查开发者工具“Computed”面板里
display的实际值，如果被标灰或划掉，说明当前 display 类型不支持宽高 - 快速验证：临时加
display: block或display: inline-block，再看width是否立刻生效 - 表格类元素（如
display: table-cell）也会无视width，需改用table-layout: fixed配合父<table> 控制<h3> <code>box-sizing决定 width 到底算哪一段默认
box-sizing: content-box下，width只管内容区；加上padding和border后，总宽度会悄悄变大。你设了width: 200px，结果占了 226px，不是代码错了，是盒模型在“诚实计算”。- 统一改用
box-sizing: border-box，让width指代整个盒子的最终宽度（含 padding + border） - 推荐全局初始化：
* { box-sizing: border-box; }，写在所有样式最前面 - 注意：如果已用
calc()手动减去 padding/border，又切到border-box，反而会导致内容区被压缩过度
父容器在“偷偷改规则”
即使
box-sizing正确、display合理，子元素的width仍可能失效——问题不在它自己，而在它的爹。- Flex 容器里的子项：若没设
flex-shrink: 0或flex-basis，width会被 flex 算法覆盖 - 百分比宽度（如
width: 50%）依赖父元素的内容区宽度；若父元素没设width，或本身是position: absolute且无定位祖先，百分比就失去参照 - 浮动父容器未清除（
clear），会导致父元素高度塌陷，子元素失去宽度计算基准
别被视觉错觉骗了：用
outline看真实边界有时候
width其实生效了，只是被padding、border或相邻元素遮住，你以为“没变”，其实是“看不见”。立即学习“前端免费学习笔记（深入）”；
- 临时加
outline: 2px dashed blue—— outline 不参与布局，也不受box-sizing影响，能真实反映渲染后尺寸 - 对比
border和outline的位置差，立刻判断是内容被撑开，还是盒子被压缩 - 如果
outline显示宽度正确但内容溢出，检查overflow: hidden或max-width是否在暗中截断
盒模型不是玄学，但它确实要求你同时看清元素自身、父容器、显示模式三者之间的牵制关系。最容易漏掉的，往往是那个没写
width的父 div，或者忘了display: block的 span。 - 统一改用
