• 模型图

  

标准盒模型

• 元素实际的宽 = width + padding + border
• 即蓝色部分（包含其内部）的宽度=元素实际的宽度，但只有content部分的宽度=width
• 大多数HTML的元素都是标准盒模型，如：< div>,< sapn>,< p>,...

怪异盒模型

• width = 元素的内容 + padding + border
• 即模型图中，蓝色部分（包含其内部）的宽度=width，同时也是这个元素的实际宽度
• 常见的怪异盒模型有：< button>,

标准盒模型 =>怪异盒模型

box-sizing: border-box;

怪异盒模型 =>标准盒模型

box-sizing: content-box;