CSS 盒模型是网页设计中用于布局和设计的重要概念。
一、基本结构
CSS 盒模型由四个部分组成
内容（Content）：盒子中实际包含的文本、图像等内容。
内边距（Padding）：内容与边框之间的空白区域。
边框（Border）：围绕内容和内边距的线。
外边距（Margin）：盒子与其他盒子之间的空白区域。
二、两种盒模型
1. 标准盒模型（W3C 盒模型）
`width` 和 `height` 属性只包括内容区域。
总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距
总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距
2. IE 盒模型（怪异盒模型）
`width` 和 `height` 属性包括内容、内边距和边框。
总宽度 = 设定的宽度 + 左右外边距
总高度 = 设定的高度 + 上下外边距
三、盒模型切换
1. 标准盒模型
默认盒模型
box-sizing: content-box;2. 怪异盒模型
box-sizing: border-box;
