标准盒模型和怪异盒子模型的区别

盒模型描述了一个 HTML 元素所占用的空间，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

• box-sizing: content-box 表示标准盒模型（默认值）
• box-sizing: border-box 表示IE盒模型（怪异盒模型）

盒模型分为：

1.标准盒模型

标准盒模型中，元素的宽度和高度只计算内容的宽度和高度，内边距、边框和外边距不包含在元素的宽度和高度之内。

 2.怪异盒子模型

怪异盒模型（IE 盒模型）中，元素的宽度和高度包含了内容、内边距和边框，外边距不包含在内。

例如，一个设置了宽度高度为 200px，内边距为 10px，边框为 2px ，外边距为 20px 的元素：

• 在标准盒模型下，元素在页面上占据的总宽度为 200 + 2×10 + 2×2 = 224px 。 

         

• 在怪异盒模型下，元素在页面上占据的总宽度就是设置的 200px ，因为内边距和边框都包含在这 200px 之内。

 

当需要精确控制元素的尺寸，且不希望添加内边距（padding）或边框（border）时导致元素的实际占用空间发生变化的情况下，可以使用怪异盒子模型（IE 盒模型），即设置 box-sizing: border-box 。