mindmap
    id1[外边距基础概念]
        id1-1[外边距定义与作用]
        id1-2[外边距的基本概念]
        id1-3[外边距在盒模型中的位置]
        id1-4[外边距的主要功能]
        id1-5[外边距属性语法]
        id1-6[margin 简写属性]
        id1-7[margin-top、margin-right、margin-bottom、margin-left 单独属性]
        id1-8[不同值的设置方法]

mindmap
    id2[外边距属性详解]
        id2-1[外边距值类型]
        id2-2[长度值 px、em、rem、%等]
        id2-3[百分比值的计算规则]
        id2-4[auto 值的特殊作用]
        id2-5[inherit、initial、unset 全局值]
        id2-6[外边距简写规则]
        id2-7[单值语法 四个方向相同]
        id2-8[双值语法 上下/左右]
        id2-9[值语法 上/左右/下]
        id2-10[值语法 上/右/下/左]

mindmap
    id3[外边距的特殊现象]
        id3-1[外边距合并]
        id3-2[相邻块级元素垂直外边距合并]
        id3-3[父子元素外边距合并]
        id3-4[空块级元素外边距合并]
        id3-5[防止外边距合并的方法]
        id3-6[负外边距]
        id3-7[负外边距的计算规则]
        id3-8[负外边距的布局应用]
        id3-9[负外边距的注意事项]

mindmap
    id4[外边距的布局应用]
        id4-1[水平居中布局]
        id4-2[块级元素水平居中]
        id4-3[内联块元素水平居中]
        id4-4[使用 auto 值实现居中]
        id4-5[响应式间距]
        id4-6[使用百分比外边距]
        id4-7[结合媒体查询调整外边距]
        id4-8[相对单位在外边距中的应用]

mindmap
    id5[外边距与盒模型]
        id5-1[标准盒模型]
        id5-2[content-box 模式下的外边距]
        id5-3[外边距与内容区域的关系]
        id5-4[替代盒模型]
        id5-5[border-box 模式下的外边距]
        id5-6[两种盒模型对外边距的影响]

mindmap
    id6[外边距与其他布局技术]
        id6-1[外边距与 Flexbox]
        id6-2[Flex 容器中的外边距]
        id6-3[Flex 项目的外边距处理]
        id6-4[外边距在 Flex 布局中的特殊行为]
        id6-5[外边距与 Grid]
        id6-6[Grid 容器中的外边距]
        id6-7[Grid 项目的外边距处理]
        id6-8[外边距在 Grid 布局中的应用]
        id6-9[外边距与定位]
        id6-10[相对定位中的外边距]
        id6-11[绝对定位中的外边距]
        id6-12[固定定位中的外边距]

mindmap
    id7[外边距的浏览器兼容性]
        id7-1[常见兼容性问题]
        id7-2[不同浏览器的默认外边距差异]
        id7-3[IE 盒模型问题]
        id7-4[移动端浏览器特殊表现]
        id7-5[兼容性解决方案]
        id7-6[CSS Reset 和 Normalize.css]
        id7-7[前缀使用和回退方案]
        id7-8[渐进增强策略]

mindmap
    id8[外边距的最佳实践]
        id8-1[性能优化]
        id8-2[减少外边距重绘和重排]
        id8-3[外边距与 GPU 加速]
        id8-4[外边距动画的性能考虑]
        id8-5[代码维护]
        id8-6[外边距命名规范]
        id8-7[外边距的模块化管理]
        id8-8[外边距的响应式设计原则]

mindmap
    id9[外边距的调试技巧]
        id9-1[开发者工具使用]
        id9-2[浏览器开发者工具中外边距的查看]
        id9-3[外边距调试技巧]
        id9-4[外边距问题的诊断方法]
        id9-5[常见问题排查]
        id9-6[外边距不生效的原因]
        id9-7[外边距合并问题的识别]
        id9-8[外边距溢出的处理]

mindmap
    id10[外边距的高级应用]
        id10-1[外边距与 CSS 变量]
        id10-2[使用 CSS 自定义属性管理外边距]
        id10-3[动态调整外边距值]
        id10-4[外边距与 CSS 函数]
        id10-5[calc   函数在外边距中的应用]
        id10-6[min  、max  、clamp   函数的应用]
        id10-7[外边距与现代布局系统]
        id10-8[外边距在容器查询中的使用]
        id10-9[外边距与子网格布局]
        id10-10[外边距在未来 CSS 规范中的发展]