什么是盒子模型

盒模型就是指css布局中的每个元素，在浏览器的解释中，都会被当做一个盒模型，浏览器通过这些盒状物的大小和浮动方式来判断下一个盒状物的贴近显示，还是下一行显示，还是其他方式显示，任何一个css布局的网页，都是由许多不同大小盒子构成。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。
对盒模型的形象化表述盒模型形象化表述：
将页面中的任何一个元素形容成邮局的每一个邮包

• 邮寄的物品—-页面中的元素内容
• 塞入的海绵—-内边距padding
• 邮局的纸盒邮包—-边框border
• 邮包堆积之间的间距—–外边距margin
  注意： 盒模型类似于邮局纸盒邮包情况，却又不等同于，
  但IE在某种情况下，却又完全等同于纸盒邮包情形（邮局的纸盒中无论塞入多少海绵保护邮寄物品，邮局的纸盒邮包的大小是不会变的，而页面中元素不同，padding属性值越大，那么所占用的空间也就越大）
  DOCTYPE类型声明影响IE浏览器对标准的理解：
  IE浏览器存在两种渲染方式：

1. Quirks(怪异模式)：以一种比较宽松的向后兼容的方式显示
   触发怪异模式使IE浏览器计算盒模型的方式有所变化（至于怎么触发怪异模式：如：在DOCTYPE类型前加一个字符，或者将它直接删除了）
   计算方式的改变就是：
   将盒模型的border和padding的数值归入到
   盒模型的宽度width及高度height
   盒模型宽=margin-left+width+margin-right
   盒模型高=margin-top+height+margin-bottom
2. Standard(标准模式)：浏览器根据规范表现页面
   cmd-markdown-logo
   盒模型的细节：
   盒模型差异
   IE6/IE7/Firefox的最终宽度=左外边距+左边框宽+左内边距+宽度+右外边距+右边框宽+右内边距
   IE5的最终宽度=左外边距+宽度+右外边距
   （1）上下margin叠加问题
   .a{
   Width:100px;
   Height:100px;
   Background-color:#eeffee;
   Border:1px solid #bbb;
   Margin:10px;
   }
   .b{
   Width:100px;
   Height:100px;
   Background-color:#ccc;
   Border:1px solid #ddd;
   Margin:10px;
   }
   空白边叠加时，结果以最大者为准
   解决办法：把相应元素设为float属性，它们将不会发生空白叠加问题了
   （2）左右margin叠加问题
   当盒对象为浮动状态时，IE6中，盒模型的左右margin会加倍
   解决办法：display:inline;