width和height不生效的根本原因是盒模型、display类型、布局上下文及父容器高度未定义等隐性规则影响；需检查box-sizing、是否inline元素、父高是否为auto、是否触发bfc等。

直接用 width 和 height 设置就行，但必须注意：默认情况下 div 是块级元素，宽度自动占满父容器，高度则“由内容撑开”——所以设了 height 却没效果，大概率是因为它没内容、没边框、没内边距，或者父容器高度未定义。

为什么设置了 height 却不生效

常见现象：div 写了 height: 200px，但实际高度还是 0 或极小；检查发现里面只有空文本、  或纯 display: inline 子元素。

• div 的默认 height 是 auto，只根据内容盒（content box）高度计算
• 若子元素浮动、绝对定位或 display: inline，它们不参与普通流高度计算，父 div 就可能塌陷
• 父容器若没设高度（比如 html、body 没设 height: 100%），百分比高度（如 height: 50%）会失效
• 有 padding 或 border 时，box-sizing 默认是 content-box，会导致“看起来比设的小”

width 和 height 的单位与行为差异

单位选错或理解偏差，是宽高“不按预期显示”的主因。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• px：绝对像素，最稳定，适合固定尺寸布局
• %：相对于**包含块（containing block）** 的宽/高，不是父元素的 width/height 值本身（例如父元素 width: 300px，子设 width: 50% → 150px；但父若 width: auto，子 50% 可能无效）
• vh/vw：视口单位，100vh = 浏览器可视区高度，不受父容器限制，常用于全屏模块
• max-width/min-height 等约束属性，比直接设 width/height 更健壮，尤其响应式场景

避免塌陷：让 div 正确撑起高度的常用手段

不是所有情况都该硬写 height，多数时候应优先让结构自然撑开。

• 加 overflow: hidden 或 overflow: auto —— 触发 BFC，包裹浮动子元素
• 子元素用 display: flex 或 display: grid 的父容器，天然不会塌陷
• 给空 div 加 min-height: 1px 或 font-size: 0 配合 line-height 控制最小视觉高度
• 调试时临时加 border: 1px solid red，立刻看清盒模型是否如预期

box-sizing 对宽高感知的影响

很多人调了半天发现“明明设了 width: 300px，实际占了 320px”，八成是忘了 box-sizing。

• 默认 box-sizing: content-box：width 只算内容区，padding 和 border 额外加在外部
• 推荐全局重置：* { box-sizing: border-box; }，这样 width: 300px 就真等于“总宽度 300px”
• 注意：border-box 下，padding 大了会导致内容区变窄，需同步调整 width 或改用 min-width

真正卡住人的往往不是语法不会写，而是没意识到 div 高度不生效背后是文档流、BFC、包含块这些隐性规则在起作用。动手前先用浏览器开发者工具的“Computed”面板看一眼 height 实际计算值和 “Layout” 里的盒模型，比反复改 CSS 更快定位问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！