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 的单位与行为差异
单位选错或理解偏差，是宽高“不按预期显示”的主因。
-
px：绝对像素，最稳定，适合固定尺寸布局 -
%：相对于**包含块（containing block）** 的宽/高，不是父元素的width/height值本身（例如父元素width: 300px，子设width: 50%→ 150px；但父若width: auto，子50%可能无效） -
vh/vw：视口单位，100vh= 浏览器可视区高度，不受父容器限制，常用于全屏模块 -
max-width/min-height等约束属性，比直接设width/height更健壮，尤其响应式场景
避免塌陷：让 div 正确撑起高度的常用手段
不是所有情况都该硬写 height，多数时候应优先让结构自然撑开。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 加
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 更快定位问题。
