CSS宽度设置无效？盒模型揭秘！

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。

好了，本文到此结束，带大家了解了《CSS宽度设置无效？盒模型揭秘！》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！