盒模型（box model）
简介：盒模型（Box Model）是CSS中一个非常重要的概念，它定义了元素在网页上的布局和尺寸。
组成：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）
内容（Content）：
内容区域是元素实际显示的内容所在的位置，例如文本或图像。
它的大小由元素的width和height属性决定。
内边距（Padding）：
内边距是内容区域和边框之间的空间。
通过padding属性设置，可以分别设置顶部、右侧、底部和左侧的内边距。
边框（Border）：
边框位于内边距之外，围绕着内容和内边距。
边框的样式、颜色和宽度可以通过border-style、border-color和border-width属性设置。
外边距（Margin）：
外边距是边框之外的空间。
通过margin属性设置，同样可以分别设置顶部、右侧、底部和左侧的外边距。`
盒模型的总宽度和高度
宽度：元素的总宽度等于内容宽度加上左右内边距、左右边框以及左右外边距。
高度：元素的总高度等于内容高度加上上下内边距、上下边框以及上下外边距。
盒模型的计算公式
总宽度：totalWidth = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
总高度：totalHeight = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom
盒模型的分类
标准盒模型（Standard Box Model）：
在标准盒模型中，元素的width和height属性仅指内容区域的尺寸。
内边距和边框的尺寸是额外增加的。
IE盒模型
在IE盒模型中，元素的width和height属性包括内容、内边距和边框的尺寸。
这种模型主要在早期版本的Internet Explorer中使用。
盒模型的控制 利用css3 box-sizing
content-box（默认值）：使用标准盒模型。
border-box：使用IE盒模型，即元素的总宽度和总高度包括了内边距和边框。
