怪异盒子和普通盒子模型的区别

怪异盒模型（也称为 Quirks Mode 或 IE5 Box Model）是早期版本的 Internet Explorer 浏览器特有的盒模型解析规则。在怪异模式下，元素的总宽度包括内容区域（content）、内边距（padding）、边框（border），以及外边距（margin）。这意味着如果你设置元素宽度为 `width: 100px`，实际占据屏幕的空间会比预期大，因为边框和内边距也被计算在内。

相比之下，标准盒模型（W3C Box Model）更为现代和一致，它将元素的总宽度分为四个部分：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。在标准模式下，宽度只包括内容区域及其内边距，边框和外边距不会计入元素的实际宽度，除非特别指定（如 `box-sizing: border-box;`）。

要解决怪异盒模型带来的布局问题，开发者通常会建议使用标准盒模型，并使用 CSS 的 `box-sizing` 属性将其设置为 `box-sizing: content-box;` 或者 `box-sizing: border-box;` 来控制元素的尺寸处理方式。