width设置无效通常因元素为inline类型，浏览器忽略该声明；改为inline-block或block后生效，但需处理对齐和空白问题。
width 设置无效，八成是因为元素是 inline 类型，浏览器直接忽略该声明；改成 inline-block 或 block 后立刻生效，但要注意随之而来的对齐和空白问题。
为什么 span、a、strong 设了 width 没反应
这些标签默认 display: inline，CSS 规范明确禁止对纯 inline 元素应用 width 和 height。开发者工具里能看到 width 被划掉或标灰，不是你写错了，是它压根不参与计算。
- 行内元素尺寸由内容、
font-size和line-height决定，不是 CSS 宽高 -
padding-left/right和margin-left/right能生效，但不会撑开父容器宽度 -
padding-top/bottom和margin-top/bottom会渲染出来，但不影响行高，容易造成视觉重叠
inline-block 是最常用解法，但别漏掉两个关键副作用
加 display: inline-block 确实让 width 生效，但实际布局中常出人意料：
- 默认
vertical-align: baseline，会导致元素和文字底部对不齐，常表现为“上飘”或“下沉”，建议显式设为vertical-align: middle或top - HTML 中的换行符和空格会被渲染成一个空格，导致相邻
inline-block元素间出现约 4px 的间隙；解决方式包括：父容器设font-size: 0（子元素再恢复）、移除 HTML 换行、或用margin-left: -4px - 如果父容器是
flex或grid，inline-block会退化为普通块级行为，此时不如直接用flex子项属性控制
百分比 width 为 0？检查父容器的包含块高度
width: 50% 通常没问题，但 height: 50% 经常是 0px——因为百分比高度依赖父容器有明确的 height 值。若父容器高度由内容撑开，那它的计算值就是 auto，子元素的 50% 就等于 0px。
立即学习“前端免费学习笔记（深入）”；
- 快速验证：给父容器加
height: 400px或height: 100vh，看子元素高度是否立刻出现 - 更稳健的做法是用
min-height配合height: 100%，避免内容少时塌陷 - 注意：
position: absolute元素的包含块是最近的定位祖先，不是父元素，这点容易误判
box-sizing 不影响 width 是否生效，但决定它到底管哪一段
width 总是会生效（只要 display 支持），但它的“管辖范围”取决于 box-sizing：
-
box-sizing: content-box（默认）：width只算内容区，padding和border额外加在外部 → 实际总宽 =width + padding-left + padding-right + border-left + border-right -
box-sizing: border-box：width包含内容 + 内边距 + 边框 → 更符合直觉，推荐全局设置* { box-sizing: border-box } - 这个设置不会让
width“突然生效”，但它会彻底改变你对元素最终尺寸的预期
真正卡住人的往往不是“怎么让 width 生效”，而是改完 display 后，元素突然错位、多出空白、或者被父容器裁剪——这些细节比属性本身更耗调试时间。
