盒子模型

 

盒子模型是CSS中一个重要的概念，盒子模型的范围就包括width/height, padding, border, margin。在平时的网页布局中其实就已经在不断的使用者盒子模型。

在上图中我们展示的是一个标准盒子模型。这里再来看下非标准的盒子模型：IE盒子模型

 

比较两个盒子模型的图，对于他们区别应该可以一目了然了：

• 标准盒子模型：高度值和宽度值不包括了padding, border
• IE盒子模型：高度值和宽度值包括了padding, border

正因为这样的区别，所以在不同的模型下同一样式的DIV在浏览器上所占用的空间面积也就不一样。

IE 和 W3C盒子模型的触发

在业界，IE浏览器总是被声讨，网页解析标准也总是游走在自己的标准和W3C通用标准之间。IE浏览器有两个模式：

• 标准模式
• 怪异模式：可以理解为IE浏览器根据自己的一些标准解析网页，当然包括了”IE盒子模型”

所以成功的触发IE浏览器的怪异模式就能成功触发”IE盒子模型”。(ie 5即是在怪异模式,IE盒子模型（box-sizing:border-box)，gt ie6 的 不在盒子模式)通常怪异模式触发的情况：

• 没写DOCTYPE，这个最常见
• 写了DOCTYPE，但是在<!DOCTYPE …>代码之前字符输出