CSS的盒子模型

所有HTML元素可以看作盒子

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• margin（外边距）

• border（边框）

• padding（内边距）

• content（内容）

盒子模型分为两种

1. W3C盒子模型(标准盒模型)

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的

2. IE盒子模型(怪异盒模型)

在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；

参考文章链接

常见的面试问题：【CSS】CSS盒模型 (opens new window)
CSS盒模型详解 (opens new window)
CSS盒模型之内边距、边框、外边距 十九问 (opens new window)