CSS 盒模型：怪异盒模型和常规盒模型的区别

CSS 的怪异盒模型 (Quirks Mode Box Model) 和常规盒模型 (Standard Box Model) 是指在计算盒子尺寸时所采用的不同方式。

在怪异盒模型中，盒子的尺寸包括了内容区、内边距和边框，但不包括外边距。换句话说，盒子的宽度 = 内容区宽度 + 内边距 + 边框。而在常规盒模型中，盒子的尺寸只包括了内容区和内边距，不包括边框和外边距。换句话说，盒子的宽度 = 内容区宽度 + 内边距。

在 CSS 中，默认情况下采用的是常规盒模型。但是，如果在 HTML 文档中没有指定文档类型 ('<!DOCTYPE>')，或者指定的文档类型不正确，就会触发怪异模式，此时采用的就是怪异盒模型。因此，在编写 CSS 时，需要注意文档类型的指定，以免出现不符合预期的盒子尺寸。