CSS 盒模型

W3C盒模型与IE怪癖模式下盒模型的区别：

代码示例：

IE在怪癖模式下渲染结果：

FF下渲染结果：

IE怪癖模式下渲染盒模型：

FF下渲染盒模型：

说明：IE在怪癖模式下盒子的大小取决于元素里面的内容，也就是说例子中盒子的大小会随着div或者p中的内容进行调整。

引发IE怪异模式的原因：

a) 文件类型描述缺失或不完整时；

b) 遇到一个HTML 3或者更早的文档时；

c) 使用HTML 4.0 Transitional或Frameset的文件类型描述且系统标识符（URI）不存在时；

d) 在DOCTYPE声明之前出现SGML注释或者其它无法识别的内容时；

e) 文档任何地方有错误时；

f) Internet Explorer 6也会在DOCTYPE声明之前出现XML声明时使用quirks模式。

所以要指定DOCTYPE，

IE在标准模式下渲染结果：

这里盒模型的渲染结果宽度还是等于 内容宽度+内边距+边框，但是在浏览器里呈现出来的是正常的结果，内容的宽度并没有从100px变成180px。

有关IE怪癖模式和更多盒模型信息参考：http://zh.wikipedia.org/wiki/IE%E7%9B%92%E6%A8%A1%E5%9E%8B%E7%BC%BA%E9%99%B7#cite_note-14