width 和 height 不失效，而是受 box-sizing（默认 content-box）、display 类型（如 inline 元素不支持）、flex/grid 布局（如 flex-shrink）及父容器高度塌陷等因素影响。
width 和 height 被 padding 或 border 吃掉了
默认 box-sizing 是 content-box，这意味着你写的 width: 200px 只算内容区宽度，加上 padding 和 border 后，元素实际占位会更大。浏览器没“不生效”，只是你没算进去。
- 检查是否设置了
padding或border，哪怕只有1px - 加一句
box-sizing: border-box;，让width和height包含 padding 和 border - 全局重置推荐：
*, *::before, *::after { box-sizing: border-box; }
display 类型不支持 width/height
行内元素（如 span、a、strong）默认无视 width 和 height，这是规范行为，不是 bug。
- 确认元素的
display
值：用开发者工具看 computed 样式里的
display - 需要设宽高就改显示类型：
display: inline-block;或display: block; - 慎用
display: inline;—— 即使强行设了 width，也不会生效
父容器约束或 flex/grid 布局干扰
在 flex 或 grid 容器里，子项的 width 和 height 可能被 flex-grow、min-width、align-items 等覆盖，尤其当没显式设 flex-shrink: 0 时。
- Flex 子项默认会收缩（
flex-shrink: 1），即使写了width: 300px也可能被压缩 - 临时调试可加：
flex: none;或flex-shrink: 0; width: 300px; - Grid 中注意
grid-template-columns是否用fr或auto覆盖了显式 width
height 在块级元素中“看起来”不生效
纯文本内容的块级元素（如空 div 或只含换行符的 p），设 height 会生效，但若内部没有内容撑开、又没设 min-height 或 overflow，可能视觉上“看不见变化”。更常见的是子元素浮动或绝对定位导致父容器高度塌陷。
- 检查父容器是否高度为 0：用开发者工具选中元素，看 layout 面板的 actual height
- 浮动子元素必须清除：
overflow: hidden;或::after { content: ""; display: table; clear: both; } - 绝对定位子元素不参与文档流，不会撑开父容器高度 —— 此时
height是独立设定，但父容器可能仍表现为“无高度”
width 和 height 从不“失效”，只是它们的行为严格绑定在盒模型、显示类型和布局上下文里。最容易忽略的是 box-sizing 默认值和 flex 子项的收缩特性 —— 这两个点不排查，光调数值没用。
