CSSwidth和height不生效？盒模型解析

CSS 中的 width 和 height 并非“不生效”，而是其表现高度依赖盒模型（尤其是默认的 content-box）、元素显示类型（如 inline 元素天然忽略宽高）、Flex/Grid 布局规则（如 flex-shrink 会覆盖显式宽度）以及父容器高度塌陷等上下文因素；真正的问题往往出在未意识到 padding/border 会额外增加尺寸、未重置 box-sizing、误用 inline 显示、或忽略布局容器的约束机制——掌握这四个关键维度，才能精准控制元素尺寸，告别无效调试。

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 是独立设定，但父容器可能仍表现为“无高度”

CSS 的 width 和 height 从不“失效”，只是它们的行为严格绑定在盒模型、显示类型和布局上下文里。最容易忽略的是 box-sizing 默认值和 flex 子项的收缩特性 —— 这两个点不排查，光调数值没用。

到这里，我们也就讲完了《CSSwidth和height不生效？盒模型解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！