1.inline,inline-block,block
说盒子模型前先说说块元素，行内元素，行内块元素的区别
- 块元素(block): 块元素排斥其他元素与其位于同一行，可设定元素的宽和高（如：div,p,h1~h6）；
- 行内元素(inline): 不可设置宽高，可以和其他行内元素位于同一行（如：a,span,em,strong）；
- 行内块元素(inline):通过display：inline-block强行转换元素为行内块元素；可以设置宽高，但是不会排斥其它元素与其位于同一行；
2.标准模式下的盒模型和怪异模式下的盒模型
2.1 -webkit-box-sizing:content-box | border-box
-webkit-box-sizing为css3属性:可以设置盒模型的组成模式，下面将和标准模式和怪异模式下的盒模型一起介绍两者之间的区别：
2.2 标准和怪异的区别：
标准盒子模型（content-box）：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )；
非标准盒子模型（border-box）：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度；
!!!目前浏览器中存在非标准盒子模型的主要是IE6,IE5,如果需要兼容到IE6，《精通CSS高级Web标准解决方案》中有介绍相关的解决方案
3.盒子模型相关问题
3.1 纵向margin叠加
场景描述： 第一个框设置margin-bottom：10px,第二个设置margin-top:20px,按常理两者间纵向的距离应该为30px,但实际情况是两者间距为20px,就是因为纵向margin发生叠加的结果(叠加都是大的吃掉小的)
!!!只有普通文档流中块框垂直空白才会发生空白边叠加；行内框，浮动框或者绝对定位框之间的空白不会发生叠加
3.2 行内元素设置padding-bottom,padding-top
场景描述：行内元素中设置padding-top和padding-bottom是不起作用，但是会有一定的边距重叠现象，实际上padding-top:10px是没有起作用的，因为span的父元素设置了:margin-top:20px;span的padding-top虽然不起作用，但是会和上面的边距重叠，这样背景就会显示红色
!!!行内元素设置margin-top，margin-bottom，padding-top,padding-bottom不起作用