盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的3D属性,css盒子3D模型从上到下分为5层：1、border；2、content+padding；3、background-image；4、background-color；5、margin。
目前有： 标准盒子模型和IE盒子模型 2种盒模型 ，区别在于：
为了满足跨浏览器的差异，我们比较肯定的方式是使用标准盒模型，这里通过在网页顶部增加DOCTYPE的声明，来解决跨浏览器兼容方案（或者使用css3的声明方式）：
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化，另外
块级元素：div , p , form, ul, li , ol, dl,form, address, fieldset, hr, menu, table...
行内元素(内联元素)：a , span, strong, em, br , img , input, label, select, textarea, cite....
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值：
box-sizing:content-box： W3C标准盒模型，默认属性。padding和border不被包含在定义的width和height之内。
box-sizing:border-box： IE6混杂模式盒模型， padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。
box-sizing：inherit ： 从父级元素中继承该属性。
如果设置box-sizing：border-box来使用IE6混杂盒模型 ，那么
设置padding与border后，内容区的宽度和高度被压缩为70px 70px,盒子的原尺寸仍然是100px 100px
当一个容器宽度定义为 width:100%之后，如果再增加 padding 或者 border 则会溢出父容器，是向外扩张的。如果使用该样式，指定为 box-sizing: border-box则 padding 和 border 就不会再溢出，而是向内收缩的，这个效果是非常实用的。
W3C组织建议把所有网页上的对象都放在一个盒子（box）中，就是所说的盒子模型，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：实际内容(content)、填充(padding)、边框(border)，边界(margin)。一个div就是一个盒子。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明与属性：
Content(内容) - 盒子的内容，显示文本和图像。
Padding(内边距) - Padding是盒子中的文字距离盒子边框（border）的距离，内边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Margin(外边距) - margin是盒子距离网页边的距离，外边距是透明的。
最终盒子实际所占位置大小计算公式是这样的：
盒子所占位置的实际宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界
盒子所占位置的实际高度=高度+顶部填充+底部填充+上边框+下边框+上边界+下边界
要注意区分的是盒子所占位置的实际宽度高度值和盒子实际大小的宽度和高度值，盒子实际大小的宽度和高度是所占位置实际宽度高度的值减去边界（margin）所占的大小，即
盒子的实际宽度=宽度+左填充+右填充+左边框+右边框
盒子的实际高度=高度+顶部填充+底部填充+上边框+下边框
盒子模型的3D示意图，如下图所示，padding与margin是看不见的透明元素
从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。
盒子模型分两种，IE盒子模型和标准的W3C盒子模型。他们对盒子模型的解释各不相同。
W3C标准盒子模型
W3C标准盒子模式包括内容(content)、填充(padding)、边框(border)、边界(margin)
IE盒子模型
从图中可以可以看出IE盒子模型的范围也包括content、padding、border、margin,所不同的是IE盒子模型的content包含了border和padding。那么应该选用哪种模型呢，当然是选用W3C 标准盒模型，就是要在网页的顶部加上DOCTYPE声明，否则各个浏览器会根据自己的行为去理解网页。
例如一个盒子的 margin 为 20px，border 为 1px，padding 为 10px,content 的宽为 200px、高为50px
假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：
宽 20*2+1*2+10*2+200=262px、高20*2+1*2*10*2+50=112px
盒子的实际大小为：宽1*2+10*2+200=222px、高1*2+10*2+50=72px
假如用ie 盒子模型，那么这个盒子需要占据的位置为：
宽 20*2+200=240px、高20*2+50=70px
盒子的实际大小为：宽 200px、高 50px
由于IE浏览器使用自己的非标准模型。IE浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。就是要在网页的顶部加上DOCTYPE声明。
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
