1. 盒子模型
(1) 盒模型实质就是一个盒子，封装四周的 HTML 元素，它包含：边距 (margin)，边框(border)，填充(padding)，内容(content)
盒模型容许在其余元素和四周元素边框之间搁置元素
(2)margin: 外边距，革除边框外的区域，外边距是通明的
border: 边框，围绕在内边距和内容外的边框
padding: 内边距，革除内容四周的区域，内边距是通明的
content: 盒子的内容，显示文本和图像
2. 规范盒子 (W3C 盒子)：box-sizing:content-box;
大小因内容的变动而变动
盒子总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right
盒子总高度
height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
规范盒子也称为内容盒子，特点是：当咱们为一个盒子指定 width 属性的时候，实际上 width 仅为内容的宽度，当 padding 和 border 变大 的时候，内容宽度不变，盒子所占的总体宽度要变大
3. 边框盒子 (IE 盒子模型)
box-sizing:border-box;
大小不会因内容的扭转而变动
盒子总宽
width+margin-left+margin-right
盒子总高
height+margin-top+margin_bottom