轻轻松松学CSS:盒子模型(Box Model)

所有HTML元素都可以看成盒子，在CSS中，"box model"这一术语是用来设计和布局的。
盒子模型包括：
1、margin，外边距
2、border，边框
3、padding，内边距
4、content，内容

标准盒模型是大多数浏览器采用的W3C标准模型
    box-sizing:content-box;
    width仅仅包含内容区域的宽度，
    height仅仅包含内容区域的高度
    内盒(不考虑外边距)的宽度=width+padding(左右内边距的宽度）+border(左右边框的宽度)
    内盒(不考虑外边距)的高度=height+padding(左右内边距的高度）+border(左右边框的高度)
    就像洋葱一样层层扒皮，每层都要算

怪异盒模型是IE中采用Microsoft自己的标准
    box-sizing:border-box;
    width不仅包含内容区域的宽度，还包括padding(左右)、border(左右)，说白了就是内盒的宽度
    height不仅包含内容区域的高度，还包括padding(左右)、border(左右),说白了就是内盒的高度
    内盒(不考虑外边距)的宽度=width
    内盒(不考虑外边距)的高度=height
    它不像洋葱那样层层扒皮，而是content、padding、border作为一个整体

标准模型和怪异模型可以应用在网页布局中