CSS 盒子模型

1. 盒子模型介绍

html 文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：

• margin（外边距）
• border（边框）
• padding（内边距）
• content（内容区域）

2. 标准模型

padding 和 border 不被包含在定义的 width 和 height 之内。对象的实际宽度等于：width + border+ padding之和。

3. 怪异模型

padding 和 border 被包含在定义的 width 和 height之内，对象的实际宽度就等于设置的 width 值。

4. 改变盒子模型

.box {
   box-sizing: border-box; /* 怪异模型 */
}

.box {
   box-sizing: content-box; /* 标准模型: 默认模式 */
}