标准盒子模型和怪异盒子模型

标准盒子模型和怪异盒子模型是 CSS 中用于描述 HTML 元素的盒子模型。它们的差异在于如何计算盒子的宽度和高度。

标准盒子模型（content-box）指的是元素的宽度和高度只包括内容的宽度和高度，不包括边框（border）、内边距（padding）和外边距（margin）。

而怪异盒子模型（border-box）指的是元素的宽度和高度包括了内容、边框和内边距，但不包括外边距。

在 CSS 中，可以通过设置 `box-sizing` 属性来指定盒子模型的类型，其中 `content-box` 为标准盒子模型，`border-box` 为怪异盒子模型。默认情况下，元素采用的是标准盒子模型。

使用怪异盒子模型可以方便地控制元素的尺寸，但是需要注意的是，使用怪异盒子模型会影响到元素的布局和定位，可能会导致一些意外的问题。