一、为什么会有两种模式？

因为在w3c标准出来之前，每个浏览器都有自己对html和css的解析和渲染方式，在标准出来后，为了兼容旧版本的页面，就出现了遵循w3c标准的标准模式和兼容旧版本的怪异模式

二、两种模式有什么区别？

1、width

标准模式：width设置的是content

怪异模式：width设置的是padding+border+content

2、height设置百分比时

标准模式：元素的高度由其包含内容决定

怪异模式：元素设置百分比会被精确应用

3、行内元素

标准模式：non-replaced inline不可以设置宽高

怪异模式：可以设置宽高

4、图片对于行内元素和table-cell的垂直对齐方式

标准模式：vertical-align默认baseline，所以图片底部会留白

怪异模式：vertical-align默认bottom，图片底部没留白

5、overflow

overflow默认设置为visible

标准模式：内容溢出时，元素大小不会变

怪异模式：内容溢出时，会扩展盒子，改变元素大小

6、字体

怪异模式的table中的字体不会继承上层字体属性设置