CSS基础（三）：w3c盒子模型和ie盒子模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

 

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

content ：包括width和height：内容的宽度、高度（不是盒子的宽度、高度）。

padding：内边距。

border：边框。

margin：外边距。

标准盒子模型和IE盒子模型

标准盒子模型：

IE盒子模型：

 

上图显示：

• 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： 内容、内边距、边框、外边距。
• 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

 

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！