DIV盒子模型

CSS 框模型

在超文本标记语言HTML中，所有的HTML 元素都可以视为方框。在 CSS 中，在谈论
设计和布局时，会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每
个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了
框模型：

从图中我们可以看到height和width属性是指内容的高度和宽度，一般是为本内容所在区域的高度和大小。而我们通常设置的背景图片所占的区域包括了边框、内边距大小和内容区域大小。外边距是透明的，不会

外边距

清除边界外的区域。外边距是透明的。边框以外是外边距，外边距默认是透明的，因
此不会遮挡其后的任何元素。下面通过对margin和margin-left属性值的设置来值观
的显示margin属性的作用以及在元素框中的位置。从下面两图中可以看到,通过对
margin属性的设置也可以在视觉上造成显示内容的移动或者说位置设置（仅视觉上
观察）。

内边距

清除内容周围的区域。内边距是透明的。

边框

围绕内边距和内容的边框。即位于外边距和内边距之间的部分，外边距与内边距交界
处。

内容

框的内容，其中显示文本和图像。

对于元素的大小和内容大小的区分

通常情况下，我们在设置元素样式时，会遇到width与height属性设置。这里的
width和height属性是内容区域的宽度和高度的设定。增加内边距、边框和外边
距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
因此一个元素的大小即元素框的尺寸（宽对应左右尺寸，高对应上下）是内容大小、
内边距大小、边框尺寸和外边距尺寸的和。

注意事项

1、所有的HTML 元素都可以视为方框，如body、section等标签元素，也具有margin,padding,border等属性就可以看出方框的概念。
2、height和width属性是指内容的高度和宽度，而不是元素框的高度和宽度。
3、背景以及背景颜色应用于由内容和内边距、边框组成的区域，即边框以及边框以内的区域，如下图所示。