盒子模型
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括： 外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
标准盒模型
盒子总宽度/高度 = width/height + padding + border + margin 。
即 width/height 只是内容高度，不包含 padding 和 border 值。
box-sizing: content-box （默认）
怪异盒模型
盒子总宽度/高度 = width/height + margin = （内容区宽度/高度 + padding + border) + margin 。
即 width/height 包含了 padding 和 border 值。
box-sizing: border-box