前言
盒子模型作为CSS基础中的基础，曾一度以为掌握了IE和W3C标准下的块级盒子模型即可，但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑。本文尝试全面叙述块级、行级盒子模型的特性。作为近日学习的记录。

何为盒子模型?
盒子模型到底何方神圣居然可以作为CSS的基础？闻名不如见面，上图了喂!

再来张切面图吧!

下面我们以 <div></div> 为栗子。 <div></div> 标签被浏览器解析后会生成div元素并添加到document tree中，但CSS作用的对象并不是document tree，而是根据document tree生成的render tree，而盒子模型就是render tree的节点。
* 注意:
* 1. CSS作用的是盒子(Box), 而不是元素(Element);
* 2. JS无法直接操作盒子。

盒子模型的结构
由于块级盒子在验证效果时干扰信息更少，便于理解盒子模型，因此下面将以块级盒子模型来讲解。
注意： 行级盒子模型与块级盒子模型结构一致，只是行级盒子在此基础上有自身特性而已。
从上面两幅图说明盒子模型其实就是由以下4个盒子组成：
1. content box：必备，由content area和4条content/inner edge组成；
2. padding box：可选，由padding和4条padding edge组成。若padding宽度设置为0，则padding edge与content edage重叠；
3. border box：可选，由border和4条border edge组成。若border宽度设置为0，则border edge与padding edage重叠；
4. margin box：可选，由margin和4条margin/outer edge组成。若margin宽度设置为0，则margin edge与border edage重叠。
对于刚接触CSS的同学，经常会将”通过width/height属性设置div元素的宽/高”挂在口边，其实这句话是有误的。
1. 首先css属性width和height作用于div元素所产生的盒子，而不是元素本身;
2. 另外盒子模型由4个盒子组成，那width和height到底是作用于哪些盒子呢？
这里就分为IE盒子模型和标准盒子模型了。
   IE box model    
IE5.5(怪异模式)采用IE盒子模型，其它将使用W3C标准盒子模型。

  Standard box model  

游走于IE box model 和 Standard box model间的通道——box-sizing属性
我们看到存在两种width/height的划分方式，到底哪种才对呢？其实两种都对，具体看如何使用而已。另外IE8开始支持CSS3属性box-sizing，让我们可以自由选择采用哪种盒子:)
box-sizing:content-box/border-box/inherit
content-box——默认值，采用Standard box model
border-box——采用IE box model
inherit——继承父元素属性值
sample:

行级盒子——怀疑人生de起点:)　　　　　　　　　　　　　　　　　　
之前我理解的盒子模型如上所述，当我看到行级盒子的种种现象时，便开始怀疑人生了:(
width/height不起作用。。。

对于block-level box

对于inline-level box

行级盒子的宽度怎么会是0呢？高度是有的但不是50px啊，到底什么回事啊？
原因很简单，那就是行级盒子的content box的高/宽根本就不是通过height/width来设置的。
content box/area的高由font-size决定的；
content box/area的宽等于其子行级盒子的外宽度(margin+border+padding+content width)之和。

  行级盒子被挤断了。。。

对于block-level box

对于inline-level box