什么是div盒子模型？

admin

如果你不能理解什么盒子，那我们这里暂且把一组<div> </div>当作一个盒子，一个用来存放内容的容器。

2D 模型：


3D 模型：


以上的2D，3D模型清晰的表现了盒子中各个属性的层叠关系以及内外位置关系。

这里我们分析一下这个盒子模型，先以2D模型为例，Border（边框）为参照：
边框：border
边框外的“margin”作为外空白，描述了边框和边框外其他元素之间的距离。
边框内的“padding”为内空白，是内容（例如文字、图片等）与边框之间的距离。
在这里需要提出的是，建议所有尺寸都以象素(px)为单位，包括文字。

结合3D模型，我们还可以得出以下结论。（transparent elements：透明元素）
背景色和背景图片和边框之间是无法设置空白的。
背景图片在背景色之上，也就是说背景图片可以覆盖背景色。

这里还有个注意点：对照2D图中的虚线部分，它的宽度和高度是我们设置的的盒子的宽度和高度，内空白(padding)会将盒子的边框撑开， 也就是我们实际看到的边框宽度是我们设置的盒子的宽度加上对应的padding宽度(包括padding-left , padding-right)。

admin

再换种描述方法，

一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这4个部分组成。
border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。
padding用于控制content与border之间的距离。
margin指的是元素与元素之间的距离。

cusnoopy

不错，果断收藏！