持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
1、有两种, IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
2、盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 文档中的每个元素被描绘为矩形盒子。确定其大小,属性——比如颜色、背景、边框,及其位置是渲染引擎的目标。CSS下这些矩形盒子由标准盒模型描述。这个模型描述元素内容占用空间。
盒子有四个边界：外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。
a.内容区域content area 是真正包含元素内容的区域。位于内容边界的内部,它的大小为内容宽度 或 content-box宽及内容高度或content-box高。如果 box-sizing 为默认值,width, min-width, max-width, height, min-height 与 max-height 控制内容大小。
b.内边距区域padding area 用内容及可能的边框之间的空白区域扩展内容区域。它位于内边边界内部,通常有背景——颜色或图片（不透明图片盖住背景颜色）它的大小为 padding-box 宽与 padding-box 高。内边距与内容边界之间的空间由padding-top,padding-right,padding-bottom,padding-left和简写padding控制。
c.边框区域border area 是包含边框的区域,扩展了内边距区域，它位于边框边界内部,大小为 border-box 宽和 border-box 高。由 border-width 及简写属性 border控制。
d.外边距区域margin area用空白区域扩展边框区域,以分开相邻的元素。它的大小为margin-box,margin-top,margin-right,margin-bottom,margin-left及简写属性margin控制。在外边距合并的情况下,由于盒之间共享外边距,外边距不容易弄清楚。
最后注意,对于行内非替换元素,其占用空间（行高）由 line-height 决定,即使有内边距与边框。
