1、盒子的种类
-
w3c盒子(内容盒子、标准盒子、默认盒子)
-
IE盒子（边框盒子、怪异盒子）
2、两种盒子有什么区别？
w3c盒子设置的width、height为内容区
IE盒子设置的width、height为盒子本身
3、盒子的组成
一、 w3c盒子
语法：box-sizing: content-box;（默认为w3c盒子）
padiding取值：
当padding=0, 盒子=内容区
设置padding>0，盒子宽高往外撑开（盒子变大、内容区不变）
w3c的盒子的宽高：
w3c盒子的宽度=width+padding-left+padding-right+border-left+border-right
w3c盒子的高度=height+padding-top+padding-bottom+border-top+border-bottom
所占页面的宽高:
w3c盒子页面所占宽度=w3c盒子的宽度+margin-left+margin-right
w3c盒子页面所占高度=w3c盒子的高度+margin-top+margin-bottom
二、IE盒子
语法：box-sizing: border-box;
padding取值：
padding=0，盒子=内容区
设置padding>0，内容器往里挤（盒子不变，内容区变小）
IE盒子的宽高：
- IE盒子的宽=width
- IE盒子的高=height
所占页面的宽高：
IE盒子页面所占宽度=IE盒子的宽度+margin-left+margin-right
IE盒子页面所占高度=IE盒子的高度+margin-top+margin-bottom