width未生效的首要原因是display类型不支持，如inline元素无视width；其次box-sizing影响宽高计算范围；最后父容器的布局模式（如flex、浮动、定位）会覆盖子元素width设置。

width没生效？先看display是否支持

很多情况下，width根本没机会起作用——因为元素压根不认这个属性。比如 、 默认是 display: inline，它只按内容撑开，设了 width: 200px 也毫无反应。

• 检查开发者工具“Computed”面板里 display 的实际值，如果被标灰或划掉，说明当前 display 类型不支持宽高
• 快速验证：临时加 display: block 或 display: inline-block，再看 width 是否立刻生效
• 表格类元素（如 display: table-cell）也会无视 width，需改用 table-layout: fixed 配合父 控制

  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 仍可能失效——问题不在它自己，而在它的爹。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！