怪异盒模型和常规盒模型计算尺寸的方式

怪异盒模型和常规盒模型都是用来描述网页元素盒子的模型，但它们计算尺寸的方式有所不同。

常规盒模型（Box Model）：

常规盒模型将元素看作是一个矩形盒子，由四个边框、内边距、内容区和外边距组成。它的计算方式是根据元素的宽度和高度来计算盒子的尺寸，其中包括：

• 内容区尺寸（Content Size）：由元素的width和height属性指定的尺寸；
• 内边距尺寸（Padding Size）：由padding属性指定的尺寸；
• 边框尺寸（Border Size）：由border属性指定的尺寸；
• 外边距尺寸（Margin Size）：由margin属性指定的尺寸。

怪异盒模型（Quirks Box Model）：

怪异盒模型是在早期的浏览器中出现的，它的计算方式与常规盒模型不同，它会将元素的宽度和高度包括在内容区的尺寸中，同时忽略内边距和边框的尺寸。因此，怪异盒模型的计算方式只包括：

• 内容区尺寸（Content Size）：由元素的width和height属性指定的尺寸；
• 外边距尺寸（Margin Size）：由margin属性指定的尺寸。

在现代的浏览器中，常规盒模型已经成为了默认的盒模型，但是在早期的浏览器中，怪异盒模型仍然在使用。因此，在编写网页时，需要了解不同盒模型的计算方式，以确保元素的尺寸和布局正确。