CSS元素宽度设置无效通常因盒模型、内边距、边框或外边距干扰，关键要区分width控制的是内容区还是整个盒子；默认content-box下width不包含padding和border，改用border-box可使width包含二者，同时需检查父容器限制、display类型及margin/padding视觉干扰。
CSS元素宽度设置无效，通常不是width写错了，而是盒模型（box-sizing）、内边距（padding）、边框（border）或外边距（margin）干扰了实际渲染尺寸。关键要分清：你设的width到底控制的是“内容区宽度”，还是“整个盒子的宽度”。
检查 box-sizing 是否为默认值 content-box
浏览器默认使用box-sizing: content-box，此时width只作用于内容区域，加上padding和border后，元素总宽度 = width + padding × 2 + border × 2。容易造成“明明设了 200px，结果占了 220px”的错觉。
解决方法：
- 统一设置
box-sizing: border-box，让width包含 padding 和 border - 推荐在全局重置中添加：
* { box-sizing: border-box; } - 单独修复某个元素：
.my-box { width: 200px; padding: 10px; border: 2px solid #ccc; box-sizing: border-box; }→ 总宽严格为 200px
确认父容器是否限制了子元素伸展
即使设置了width: 300px，如果父元素是display: flex且未设flex-shrink: 0，或父元素有max-width/overflow: hidden，子元素也可能被压缩或截断。
立即学习“前端免费学习笔记（深入）”；
排查建议：
- 用浏览器开发者工具（F12）选中元素，看“Computed”面板中
width是否被覆盖或计算为 auto - 检查父级是否有
flex、grid布局相关属性影响尺寸分配 - 临时给父容器加
outline: 1px solid red，观察是否“看不见但占空间”
留意 display 类型对 width 的限制
某些display值会让width和height失效：
-
display: inline元素无法设置宽高（除非改为inline-block或block） -
display: table-cell、table-row受表格布局规则约束，width 表现不直观 -
display: contents会脱离文档流，其子元素直接参与父容器布局，自身宽高无意义
快速验证：给元素加display: block或inline-block，再看 width 是否生效。
排除 margin/padding/border 的视觉干扰
有时宽度“看起来没变”，其实是padding或border把内容撑开了，或者margin导致相邻元素重叠遮挡。
实用技巧：
- 用开发者工具的“Layout”或“Box Model”视图，直观查看各层尺寸数值
- 临时设置
outline: 2px dashed blue（outline 不占布局空间），对比 border 看真实边界 - 清除默认样式干扰：
margin: 0; padding: 0; border: none;，再逐步加回
