mindmap
    id1[盒模型概述]
        id1-1[什么是盒模型]
            id1-1-1[盒模型的基本概念]
            id1-1-2[盒模型在网页布局中的重要性]
            id1-1-3[盒模型的历史发展]
        id1-2[盒模型的组成要素]
            id1-2-1[内容区域]
            id1-2-2[内边距]
            id1-2-3[边框]
            id1-2-4[外边距]

mindmap
    id2[盒模型类型详解]
        id2-1[标准盒模型]
            id2-1-1[标准盒模型的计算方式]
            id2-1-2[标准盒模型的属性设置]
            id2-1-3[标准盒模型的适用场景]
        id2-2[替代盒模型]
            id2-2-1[替代盒模型的计算方式]
            id2-2-2[box-sizing属性详解]
            id2-2-3[替代盒模型的优势]

mindmap
    id3[盒模型属性详解]
        id3-1[内容区域属性]
            id3-1-1[width和height属性]
            id3-1-2[min-width和max-width]
            id3-1-3[min-height和max-height]
        id3-2[内边距属性]
            id3-2-1[padding属性详解]
            id3-2-2[padding的单边设置]
            id3-2-3[padding的百分比值]
        id3-3[边框属性]
            id3-3-1[border-width属性]
            id3-3-2[border-style属性]
            id3-3-3[border-color属性]
            id3-3-4[border-radius圆角属性]
        id3-4[外边距属性]
            id3-4-1[margin属性详解]
            id3-4-2[margin的单边设置]
            id3-4-3[margin的负值应用]
            id3-4-4[margin的百分比值]

mindmap
    id4[盒模型布局特性]
        id4-1[块级元素盒模型]
            id4-1-1[块级元素特性]
            id4-1-2[块级元素的盒模型计算]
            id4-1-3[块级元素的布局规则]
        id4-2[行内元素盒模型]
            id4-2-1[行内元素特性]
            id4-2-2[行内元素的盒模型计算]
            id4-2-3[行内元素的布局规则]
        id4-3[行内块元素盒模型]
            id4-3-1[行内块元素特性]
            id4-3-2[行内块元素的盒模型计算]
            id4-3-3[行内块元素的布局规则]

mindmap
    id5[盒模型高级特性]
        id5-1[外边距合并]
            id5-1-1[垂直外边距合并]
            id5-1-2[外边距合并的触发条件]
            id5-1-3[避免外边距合并的方法]
        id5-2[盒阴影]
            id5-2-1[box-shadow属性详解]
            id5-2-2[盒阴影的多重效果]
            id5-2-3[盒阴影的inset属性]
        id5-3[轮廓属性]
            id5-3-1[outline属性详解]
            id5-3-2[outline与border的区别]
            id5-3-3[outline-offset属性]

mindmap
    id6[盒模型调试与优化]
        id6-1[盒模型调试工具]
            id6-1-1[浏览器开发者工具]
            id6-1-2[盒模型可视化工具]
            id6-1-3[盒模型测量技巧]
        id6-2[盒模型性能优化]
            id6-2-1[减少重排和重绘]
            id6-2-2[盒模型属性优化]
            id6-2-3[盒模型布局优化]
        id6-3[响应式设计中的盒模型]
            id6-3-1[媒体查询与盒模型]
            id6-3-2[弹性盒模型应用]
            id6-3-3[网格布局中的盒模型]

mindmap
    id7[盒模型实战应用]
        id7-1[常见布局模式]
            id7-1-1[居中布局]
            id7-1-2[多列布局]
            id7-1-3[圣杯布局]
        id7-2[盒模型最佳实践]
            id7-2-1[盒模型规范化]
            id7-2-2[盒模型代码规范]
            id7-2-3[盒模型维护技巧]
        id7-3[盒模型常见问题]
            id7-3-1[盒模型兼容性问题]
            id7-3-2[盒模型布局问题]
            id7-3-3[盒模型调试技巧]