1 盒模型基础概念 #
mindmap
id1[盒模型基础概念]
id1-1[盒模型基本组成]
id1-2[内容区域 Content Area]
id1-3[内边距 Padding]
id1-4[边框 Border]
id1-5[外边距 Margin]
id1-6[盒模型显示类型]
id1-7[块级元素 Block-level Elements]
id1-8[行内元素 Inline Elements]
id1-9[行内块元素 Inline-block Elements]
id1-10[表格元素 Table Elements]
id1-11[弹性盒模型元素 Flex Items]
id1-12[网格布局元素 Grid Items]
盒模型基本组成
内容区域 Content Area
内边距 Padding
边框 Border
外边距 Margin
盒模型显示类型
块级元素 Block-level Elements
行内元素 Inline Elements
行内块元素 Inline-block Elements
表格元素 Table Elements
弹性盒模型元素 Flex Items
网格布局元素 Grid Items
2 标准盒模型 Content-box #
标准盒模型定义
W3C 标准盒模型规范
内容框尺寸计算方式
实际占用空间计算
标准盒模型应用
默认盒模型设置
浏览器兼容性
适用场景分析
mindmap
id2[标准盒模型 Content-box]
id2-1[标准盒模型定义]
id2-2[W3C 标准盒模型规范]
id2-3[内容框尺寸计算方式]
id2-4[实际占用空间计算]
id2-5[标准盒模型应用]
id2-6[默认盒模型设置]
id2-7[浏览器兼容性]
id2-8[适用场景分析]
3 IE盒模型 Border-box #
mindmap
id3[IE盒模型 Border-box]
id3-1[IE盒模型特点]
id3-2[IE 怪异模式盒模型]
id3-3[边框框尺寸计算方式]
id3-4[实际内容区域计算]
id3-5[IE盒模型应用]
id3-6[历史背景和兼容性问题]
id3-7[现代浏览器支持情况]
id3-8[实际开发中的使用]
IE盒模型特点
IE 怪异模式盒模型
边框框尺寸计算方式
实际内容区域计算
IE盒模型应用
历史背景和兼容性问题
现代浏览器支持情况
实际开发中的使用
4 盒模型切换与设置 #
box-sizing 属性
content-box 值详解
border-box 值详解
padding-box 值 已废弃
盒模型重置技巧
CSS Reset 中的盒模型设置
通用选择器重置方法
现代CSS框架的盒模型处理
mindmap
id4[盒模型切换与设置]
id4-1[box-sizing 属性]
id4-2[content-box 值详解]
id4-3[border-box 值详解]
id4-4[padding-box 值 已废弃]
id4-5[盒模型重置技巧]
id4-6[CSS Reset 中的盒模型设置]
id4-7[通用选择器重置方法]
id4-8[现代CSS框架的盒模型处理]
5 盒模型相关属性详解 #
mindmap
id5[盒模型相关属性详解]
id5-1[尺寸属性]
id5-2[width 和 height]
id5-3[min-width 和 max-width]
id5-4[min-height 和 max-height]
id5-5[内边距属性]
id5-6[padding 简写属性]
id5-7[padding-top、padding-right、padding-bottom、padding-left]
id5-8[百分比值的计算方式]
id5-9[边框属性]
id5-10[border 简写属性]
id5-11[border-width、border-style、border-color]
id5-12[单边边框设置]
id5-13[边框圆角 border-radius]
id5-14[外边距属性]
id5-15[margin 简写属性]
id5-16[margin-top、margin-right、margin-bottom、margin-left]
id5-17[外边距折叠 Margin Collapsing]
id5-18[负外边距应用]
尺寸属性
width 和 height
min-width 和 max-width
min-height 和 max-height
内边距属性
padding 简写属性
padding-top、padding-right、padding-bottom、padding-left
百分比值的计算方式
边框属性
border 简写属性
border-width、border-style、border-color
单边边框设置
边框圆角 border-radius
外边距属性
margin 简写属性
margin-top、margin-right、margin-bottom、margin-left
外边距折叠 Margin Collapsing
负外边距应用
6 盒模型布局影响 #
盒模型与文档流
正常流中的盒模型行为
浮动对盒模型的影响
定位对盒模型的影响
盒模型与布局系统
传统布局中的盒模型应用
弹性布局 Flexbox 中的盒模型
网格布局 Grid 中的盒模型
mindmap
id6[盒模型布局影响]
id6-1[盒模型与文档流]
id6-2[正常流中的盒模型行为]
id6-3[浮动对盒模型的影响]
id6-4[定位对盒模型的影响]
id6-5[盒模型与布局系统]
id6-6[传统布局中的盒模型应用]
id6-7[弹性布局 Flexbox 中的盒模型]
id6-8[网格布局 Grid 中的盒模型]
7 盒模型计算与调试 #
mindmap
id7[盒模型计算与调试]
id7-1[盒模型计算规则]
id7-2[元素总宽度计算]
id7-3[元素总高度计算]
id7-4[盒模型尺寸继承规则]
id7-5[开发者工具调试]
id7-6[浏览器开发者工具中的盒模型视图]
id7-7[盒模型测量技巧]
id7-8[常见盒模型问题排查]
盒模型计算规则
元素总宽度计算
元素总高度计算
盒模型尺寸继承规则
开发者工具调试
浏览器开发者工具中的盒模型视图
盒模型测量技巧
常见盒模型问题排查
8 高级盒模型特性 #
替换元素盒模型
图片、视频等替换元素的盒模型
object-fit 和 object-position
替换元素尺寸控制
多列布局盒模型
column-width 和 column-count
列间距和列规则
跨列元素处理
盒阴影与轮廓
box-shadow 属性
outline 属性
阴影与轮廓对布局的影响
mindmap
id8[高级盒模型特性]
id8-1[替换元素盒模型]
id8-2[图片、视频等替换元素的盒模型]
id8-3[object-fit 和 object-position]
id8-4[替换元素尺寸控制]
id8-5[多列布局盒模型]
id8-6[column-width 和 column-count]
id8-7[列间距和列规则]
id8-8[跨列元素处理]
id8-9[盒阴影与轮廓]
id8-10[box-shadow 属性]
id8-11[outline 属性]
id8-12[阴影与轮廓对布局的影响]
9 盒模型最佳实践 #
mindmap
id9[盒模型最佳实践]
id9-1[响应式设计中的盒模型]
id9-2[媒体查询中的盒模型调整]
id9-3[移动端盒模型优化]
id9-4[弹性盒模型的使用]
id9-5[性能优化考虑]
id9-6[盒模型重绘与重排]
id9-7[硬件加速与盒模型]
id9-8[盒模型动画性能]
id9-9[可访问性考虑]
id9-10[盒模型与文字大小]
id9-11[高对比度模式下的盒模型]
id9-12[屏幕阅读器中的盒模型表现]