Standards模式和Quirks模式有什么区别？

怪异模式和标准模式最早是为了对旧版本网页进行兼容而设计的，可以通过 <!DOCTYPE> 来进行区分。

两者最主要的区别就是在盒子模型上，元素的宽度。
在标准模式下，元素的宽度只是指 width，如果添加了 padding 和 border 元素实际的宽度需要加上 padding * 2 和 border * 2。
在怪异模式下，元素的width是包含了 padding 和 border。

通过 CSS 的 {box-sizing: border-box;} 来对盒模型进行设置。

虽然标准模式可以算是标准，但实际使用过程中怪异模式反而更符合人的直觉（个人认为）,这样可以减少对 padding 和 border 的额外计算。