html中用div套div需嵌套标签并配合css设置宽高、边框等样式；注意外边距合并、定位脱离文档流、display属性影响及box-sizing盒模型，默认content-box会导致尺寸偏差。
HTML 中怎么用 div 套 div
就是在一个框里再放一个框，最直接的方式就是嵌套 div 元素。浏览器默认会按 HTML 结构一层层渲染，外层 div 是容器，内层 div 是内容，但光写标签没用——它们默认没有宽高、边框、间距，看起来就像啥也没放。
实操建议：
- 给外层
div设width和height（或靠内容撑开），否则它可能“塌陷”，看不见 - 给内层
div加border或background-color，不然两个框颜色一样，根本分不清谁套谁 - 注意默认的
margin和padding：内层div的上外边距可能“溢出”到外层外面（外边距合并），想让它老老实实待在框里，可以加overflow: hidden到外层，或改用padding
<div style="width: 200px; height: 150px; border: 1px solid #333;"> <div style="width: 100px; height: 80px; background: #eee; margin: 20px;"></div> </div>
为什么有时候内层框“跑到了外面”
常见错误现象：明明写了嵌套，预览时内层 div 却顶到了页面顶部，或者和外层完全错位。这不是 HTML 写错了，而是 CSS 布局行为在起作用。
关键原因：
立即学习“前端免费学习笔记（深入）”；
-
position: absolute的内层框会脱离文档流，它相对于最近的「定位祖先」（即position不是static的父级）定位；如果外层没设position: relative，它就往上一直找，甚至跑到body里去 - 浮动（
float）也会让内层框“飘走”，外层可能高度塌陷，看起来像内层掉出来了 - Flex 或 Grid 容器里的子项，会受
align-items/justify-content影响位置，不是简单“居中”就完事
解决办法很简单：确认外层有没有加 position: relative（需要绝对定位时），或关掉浮动、检查 flex 容器的对齐配置。
display 属性怎么影响“套框”效果
同一个嵌套结构，display 值一变，视觉效果可能天差地别。它决定元素怎么占空间、怎么排列、甚至会不会“消失”。
典型参数差异：
-
display: block（默认）：外层和内层都独占一行，能设宽高，适合常规套框 -
display: inline：内层变成行内元素，width/height失效，没法当“框”用了 -
display: inline-block：保留宽高，又可以和其他元素并排，但要注意换行符会生成空格，造成意外间隙 -
display: none：整个内层框直接不渲染，不是隐藏，是“不存在”
性能提示：频繁切换 display（比如 JS 控制显隐）比切 visibility: hidden 开销大，因为会触发重排（reflow）。
用 CSS 框架（如 Tailwind）怎么快速套框
Tailwind 本质还是生成内联样式，但它把常用组合打包成 class，省得手写一堆 style。不过新手容易忽略“类名叠加顺序”和“响应式断点”的实际效果。
实操要点：
- 外层用
class="w-64 h-48 border"，内层用class="m-4 bg-gray-100 w-32 h-24"，就能立刻看到嵌套框 - 别混用
px-4（内边距）和mx-4（外边距）：前者让内容离边更远，后者让整个框离邻居更远，目的不同 - 响应式类如
md:w-80只在中屏生效，如果只在外层加，内层宽度没同步调，小屏下可能溢出或留大片空白
兼容性提醒：Tailwind 编译后是标准 CSS，只要目标浏览器支持 Flex/Grid，就没问题；但若用到 @apply + 自定义 CSS 变量，得确认变量是否被正确注入。
最容易被忽略的是盒模型本身——box-sizing 默认是 content-box，你设的 width: 100px 不包含 padding 和 border，结果框比预期宽。全局加 * { box-sizing: border-box } 能省掉大量调试时间。
