相关概念
CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
CSS 中组成一个块级盒子需要:
- Content box（内容）: 这个区域是用来显示内容，大小可以通过设置 width 和 height
- Padding box（内边距）: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置
- Border box（边框）: 边框盒包裹内容和内边距。大小通过 border 相关属性设置
- Margin box（外边距）: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置
标准盒模型 的所占位置的组成：宽高（content）+padding+border+margin；
IE盒模型 的所占位置的组成：宽高（content）+padding+border
注意
标准盒模型的宽高则为内容区域的宽高,即属性width,height只包含内容content，不包含border和padding。IE盒模型则宽高为border + padding + 内容区，即属性width,height包含border和padding，指的是content+padding+border。
box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）
[默认值] 是content-box
