width/height不生效主因是display类型、包含块高度缺失及box-sizing影响：行内元素需设inline-block/block；height百分比需父元素有明确height；border-box可避免尺寸溢出。
width/height 设置后元素不生效？先看 display 类型
块级元素（如 div、p）默认支持 width 和 height；行内元素（如 span、a）即使写了也不会生效，除非显式改 display。
-
display: inline→ 忽略width/height -
display: inline-block→ 支持width/height，且保持行内流特性 -
display: block→ 完全支持，独占一行 -
display: flex或display: grid容器子项：受父容器布局控制，width/height可能被flex属性覆盖
百分比 width/height 为什么经常是 0？
百分比值是相对于**包含块（containing block）**计算的。常见陷阱：
-
width: 50%有效，因为块级元素的包含块通常是父元素宽度 -
height: 50%往往无效，因为父元素若没设height，其高度由内容撑开 → 计算结果为0px - 解决办法：给父元素加
height（如height: 400px或height: 100vh），或用min-height配合height: 100%
box-sizing 影响实际尺寸，别忽略它
默认 box-sizing: content-box，此时 width 只算内容区，padding 和 border 会额外增加总宽高；设成 border-box 后，width 包含内容+内边距+边框。
div {
width: 200px;
padding: 10px;
border: 2px solid #000;
box-sizing: content-box; /* 实际占用宽度 = 200 + 10×2 + 2×2 = 224px */
}
div {
width: 200px;
padding: 10px;
border: 2px solid #000;
box-sizing: border-box; /* 实际占用宽度 = 200px，内容区变窄 */
}响应式场景下优先用 max-width / min-height 等替代方案
纯 width/height 在移动设备上容易导致溢出或拉伸失真。更稳妥的做法：
立即学习“前端免费学习笔记（深入）”；
- 图片/媒体：用
max-width: 100%+height: auto保比例缩放 - 卡片/容器：用
min-width防过窄，max-width防过宽，配合width: 100% - 固定比例容器（如 16:9）：用
padding-top: 56.25%+position: relative+ 绝对定位子元素
硬写 width: 375px 在不同屏幕下大概率出问题，尤其遇到 zoom 或横屏时。
