参考链接

CSS盒模型完整介绍

MDN: box-sizing

CSS 盒子模型

• 有两种，IE 盒子模型/怪异盒子模型，W3C 盒子模型
• 盒模型：内容（ content ）、填充（ padding ）、边界（ margin ）、边框（ border ）
• 标准盒子模型尺寸计算公式：
  width = 内容的宽度
  height = 内容的高度
  宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。
• 怪异盒子模型尺寸计算公式：
  _width_ = border + padding + 内容的宽度
  _height_ = border + padding + 内容的高度

通过 CSS3 新增的属性 box-sizing: content-box | border-box

分别设置盒模型为 标准模型（content-box）和 IE模型/怪异盒子模型（border-box）。

.content-box {
    box-sizing:content-box;
    width: 100px;
    height: 50px;
    padding: 10px;
    border: 5px solid red;
    margin: 15px;
}

.border-box {
    box-sizing: border-box;
    width: 100px;
    height: 50px;
    padding: 10px;
    border: 5px solid red;
    margin: 15px;
}