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

CSS标准盒子模型和怪异盒子模型是两种不同的CSS盒子模型，它们的区别主要体现在计算盒子的总宽度和高度的方式上。

1. CSS标准盒子模型（content-box）：在标准盒子模型中，一个元素的总宽度和高度只包括内容的宽度和高度，不包括内边距（padding）、边框（border）和外边距（margin）。

2. 怪异盒子模型（border-box）：在怪异盒子模型中，一个元素的总宽度和高度包括内容的宽度和高度，以及内边距（padding）和边框（border），但不包括外边距（margin）。换句话说，元素的宽度和高度会被内边距和边框所占据，而不是在内边距和边框之内。

区别：

• 盒子大小计算的方式不同：标准盒子模型只计算内容的大小，而怪异盒子模型计算包括内容、内边距和边框的大小。
• 盒子的定位方式不同：在标准盒子模型中，盒子的定位是相对于内容的，而在怪异盒子模型中，盒子的定位是相对于包含块的。
• 盒子大小的设置方式不同：在标准盒子模型中，设置盒子的宽度和高度只需要分别设置content的宽度和高度，而在怪异盒子模型中，设置盒子的宽度和高度需要分别设置content、padding和border的宽度和高度。

   为了兼容不同的浏览器，可以通过设置CSS的box-sizing属性来改变盒子模型的行为。box-sizing属性的取值有两种：content-box和border-box。content-box是默认值，表示使用标准盒子模型；border-box表示使用怪异盒子模型。