盒子模型

• 盒子模型（Box Modle）就是把HTML页面中的元素看做是一个矩形盒子，每个矩形都由元素的: 内容(content), 内边距(padding), 边框(border), 外边距(margin) 组成的；
• 每个盒子除了有自己的大小之外，还影响着其他盒子的位置
• 每个盒子都有：边界，边框，填充，内容 4个属性

标准盒子模型

• 标准盒子模型中width指的是内容区域content的宽度；
• height指的是content的高度
• 标准盒子的大小 = content+padding+border+margin

怪异盒子

• 怪异盒子模型中width指的是内容content；
• 边框border
• 内边距padding区域的总宽度是宽度；
• height指的是内容，内边距，边框的总和高度
• 怪异盒子的大小 = width{content+padding+border}+margin

如何选择盒子模型

• 如果是定义完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模型
• 如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9一下（IE6,IE7,IE8）的版本都会触发怪异模式，其他浏览器中会默认为W3C标准模式