Record box-sizing: border-box;

box-sizing 设置的是元素的盒模型(Box Model)。页面上的每个元素都被描绘成矩形盒子，用这个盒子来描述其占用空间，这个模型称为盒模型。盒模型由 4 部分组成，从内到外分别是 内容(content)，内边距(padding)，边框(border)和外边框(margin)。

盒模型

当 box-sizing 设置为 border-box 时，所占水平空间 = width值，内容宽度 = width值 - 左右padding值 - 左右边框宽度值。例如:
box-sizing: border-box;
width: 100px;
padding-left: 10px;
所占水平空间是 100px，内容宽度值是 90px(width: 100px - padding-left: 10px)。把 padding-left 改成 20px。所占水平空间仍然是 100px，内容宽度值是 80px(width: 100px - padding-left: 20px)。

box-sizing 的默认值是 content-box, 水平空间 = width值 + 左右padding值 + 左右border宽度值