HTML 盒模型

盒模型（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盒模型，即元素的总宽度和总高度包括了内边距和边框。