用div创建宽高盒子需同时设置width和height，并推荐添加background-color确认显示；常见不显示原因包括父容器无高度、display被修改、CSS权重不足、overflow裁剪等。
怎么用 div 写一个带宽高的盒子
直接写就行，div 默认是块级元素，设了 width 和 height 就会显形。但注意：如果里面没内容、也没设 background-color 或边框，它在页面上是“看不见的”——不是没创建，是透明且无尺寸感。
-
width和height必须同时设才稳；只设一个时，另一个可能被内容撑开（比如文字换行后高度变大） - 推荐加
background-color一眼确认盒子是否生效，调试完再删 - 单位优先用
px或rem，避免用%——父容器没高时，height: 100%会失效
为什么设了宽高却没显示？常见原因
最常踩的坑不是语法错，而是 CSS 生效条件没满足。浏览器不会报错，但盒子就是不出现。
- 父容器没设定
height，子div用height: 100%→ 实际高度为0 -
display: inline或其他非块级显示方式覆盖了默认行为，导致width/height失效 - CSS 选择器权重不够，被其他规则覆盖（比如全局重置样式里写了
div { height: auto; }） - 盒子被
overflow: hidden父容器裁掉，或被transform: scale(0)缩没了
div 盒子的宽高受哪些 CSS 属性影响
宽高不是孤立存在的，几个关键属性会悄悄改它的实际占位大小。
-
box-sizing默认是content-box：你写的width: 200px只算内容区，加上padding和border后总宽就超了；改成border-box更符合直觉 -
padding和border在content-box下会撑大盒子；在border-box下则从设定的宽高中“扣减” -
margin不影响盒子自身尺寸，但会影响它和其他元素的间距，容易误判“盒子没出来” - Flex 或 Grid 容器里的
div，width/height可能被对齐或收缩行为覆盖
一个最小可用示例（复制就能跑）
<div style="width: 200px; height: 100px; background-color: #eee;"></div>
这就是最简盒子。不用 class、不用外部 CSS、不依赖任何框架。如果这行代码贴进 HTML 里还看不到灰块，问题一定出在外部环境：比如样式被重置、HTML 结构不完整（缺 <body>）、或者浏览器插件拦截了内联样式。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写盒子，是判断它“为什么不可见”——多数时候不是不会写，是没意识到 visibility、display、position、z-index 这些属性正在暗中干预。
