css width 和 height 不生效怎么办_盒模型属性影响解析

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

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