盒模型四层结构为content→padding→border→margin，从内向外逐级叠加；width默认只含content（content-box），设border-box则包含content+padding+border；padding影响背景和min-height，margin会合并且不继承背景。
盒模型四个区域到底谁包着谁
盒模型不是“一层套一层”的俄罗斯套娃，而是从内容向外逐级叠加的四层结构：最内是 content（你写的文字或图片），往外是 padding（内容和边框之间的空白），再往外是 border（边框本身），最外是 margin（盒子与其他元素之间的间隙）。这四层严格按顺序堆叠，margin 不会影响自身盒子尺寸，但会撑开周围空间。
常见错误现象：width: 200px 的 div 用 getBoundingClientRect().width 测出来却是 240px——因为默认盒模型把 padding 和 border 算进去了。
- 使用场景：做固定宽高的卡片、表单控件对齐、响应式栅格微调时，必须明确当前尺寸是否含内边距
-
box-sizing是关键开关：content-box（默认）让width只管 content；border-box让width包含 content + padding + border - 推荐全局设为
box-sizing: border-box，再配合* { box-sizing: inherit }继承，避免意外溢出
padding 和 margin 看似相似，实际行为完全不同
padding 是盒子“内部呼吸空间”，影响背景色、边框绘制范围，还会触发父容器的 min-height 计算；margin 是盒子“外部社交距离”，不继承背景，且存在合并（collapse）行为——相邻块级元素的垂直 margin 会取较大值，而不是相加。
常见错误现象：两个 div 各设 margin-bottom: 20px，结果间距只有 20px 而不是 40px；给子元素设 margin-top，父容器却没反应——其实是 margin 穿透上浮了。
立即学习“前端免费学习笔记（深入）”；
- 垂直 margin 合并只发生在普通流中的块级元素之间，flex 或 grid 容器里不合并
-
padding支持百分比值（相对于父容器宽度），margin的百分比也参照父容器宽度，但 top/bottom 百分比在某些老浏览器中表现不稳定 - 想彻底避免 margin 合并？给父容器加
border-top: 1px solid transparent或overflow: hidden
border 影响布局的三个隐藏细节
border 不只是画条线，它真实占据空间、参与尺寸计算，并且有渲染优先级。尤其当 border-style 是 dashed 或 dotted 时，不同浏览器的虚线起点和端点对齐方式可能不一致，导致视觉错位。
常见错误现象：设置 border: 1px solid #000 后，元素突然换行；用 outline 替代 border 做焦点样式，却发现 outline 不占布局空间，导致焦点态“飘”在内容外。
-
border-width为 0 时，即使写了border-color和border-style，也不会渲染，也不占空间 -
border-radius会裁剪border和background，但不会裁剪box-shadow或子元素溢出内容 - 需要无边框但保留空间占位？用
border: 1px solid transparent，比visibility: hidden更可靠
调试盒模型最有效的两个方法
靠肉眼猜或反复改数值效率极低。Chrome DevTools 的“Computed”面板能直接看到每个区域的实际像素值，但更关键是开启“Layout”下的“Show box model”——它会在元素上实时叠加 color-coded 四层色块，绿色是 content，蓝色是 padding，橙色是 border，红色是 margin。
常见错误现象：开发者工具里看到 padding 显示为 0，但元素明显有空白——可能是用了 line-height 或 font-size 导致行内元素撑高，而非 padding。
- 命令行快速验证：在控制台执行
getComputedStyle(document.querySelector('your-selector'))，查看contentBoxSize（需支持）、paddingTop、borderLeftWidth等字段 - 临时加 debug 样式：
* { outline: 1px solid red !important; }快速暴露所有元素边界，但记得删掉，否则影响真实样式 - 注意：
margin在 flex 容器中可能被justify-content或align-items覆盖，此时 computed 值仍显示，但 layout 行为已改变
盒模型真正难的不是记住四层名字，而是每次写 CSS 时下意识问一句：我现在调的这个值，到底算在哪个区域里？浏览器会怎么把它塞进整个布局流里？这个问题没想清，后面所有 margin 折叠、padding 溢出、border 错位，都是必然结果。
