设了width没反应是因为行内元素默认display: inline，css禁止对其设置width/height；需改display为block或inline-block，并注意vertical-align、html空格间隙、父容器包含块及box-sizing影响。
为什么、设了width没反应
这些标签默认是 display: inline，CSS 规范明确禁止对纯 inline 元素应用 width 和 height。你在开发者工具里看到 width 被划掉或标灰，不是写错了，是它压根不参与布局计算。
行内元素的尺寸由内容、font-size 和 line-height 决定，和你写的 width 无关。哪怕加了 padding-left/padding-right 或 margin-left/margin-right，也只能影响左右间距，不会撑开父容器宽度。
-
padding-top/padding-bottom和margin-top/margin-bottom会渲染出来，但不影响行高，容易造成视觉重叠 - 临时验证：给元素加
display: inline-block或display: block，再看width是否立刻生效
inline-block 让 width 生效，但有两个副作用必须处理
display: inline-block 确实是最常用解法，但它带来的副作用常被忽略，导致布局“看起来没变”或“位置飘忽”。
- 默认
vertical-align: baseline，会让元素和文字底部对不齐，表现为“上浮”或“下沉”；建议显式设为vertical-align: middle或vertical-align: top - HTML 中的换行符和空格会被渲染成一个空格，相邻
inline-block元素间自动出现约 4px 的间隙；解决方式包括：font-size: 0（父容器设，子元素再恢复）、移除 HTML 换行、或用margin-left: -4px - 如果父容器是
flex或grid，inline-block会退化为普通块级行为，此时不如直接用flex子项属性控制
百分比 width 为 0？检查父容器的包含块是否真有宽度
width: 50% 看似简单，但实际计算依赖“包含块（containing block）”。常见陷阱是：父容器没设 width，或本身是 position: absolute 且无定位祖先，导致百分比失去参照，最终算出 0px。
-
width: 50%通常没问题，因为块级元素的包含块通常是父元素宽度 -
height: 50%经常是 0px——因为父容器高度若为auto（由内容撑开），子元素的 50% 就等于 0 - 快速验证：给父容器加
height: 100vh或height: 400px，看子元素高度是否立刻出现 - 注意：包含块不一定是父元素，而是最近的“定位祖先”（
position: relative/absolute/fixed）
box-sizing 不影响 width 是否生效，但彻底改变你对尺寸的预期
box-sizing 不会让 width “突然生效”，但它决定这个值到底管哪一段：
-
box-sizing: content-box（默认）：width只算内容区，总宽 =width+padding-left+padding-right+border-left+border-right -
box-sizing: border-box：width包含内容 + 内边距 + 边框，更符合直觉；推荐全局设置* { box-sizing: border-box; } - 如果已用
calc()手动减去padding/border，又切到border-box，反而会导致内容区被压缩过度
真正卡住人的往往不是“怎么让 width 生效”，而是改完 display 后，忘了 vertical-align、HTML 空格间隙、父容器包含块缺失，或者还在用 content-box 却按 border-box 的方式估算尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
