【CSS】标准盒模型和IE盒模型（box-sizing:border-box）

盒模型

在Web开发中，每个元素都被视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。 盒模型定义了元素在文档中所占据的空间以及如何计算其尺寸。
在CSS中，有两种盒模型，即标准盒模型和IE盒模型。

• 标准盒模型：将元素的宽度和高度仅计算为内容区域的尺寸（content-box，默认）
• IE盒模型：将宽度和高度包括了内边距和边框的尺寸（border-box）

box-sizing属性

box-sizing属性用于指定元素的盒模型计算方式。 它有两个可能的值：content-box和border-box。

box-sizing:border-box

它指定了盒子的宽度和高度只包括内容区域、内边距和边框，不包括外边距。 换句话说，边框和内边距的尺寸会从元素的内容区域中减去，使得内容区域的尺寸保持不变。 这可以让开发人员更轻松地控制元素的尺寸和布局，而无需考虑边框和内边距对尺寸的影响。例如，如果一个元素的宽度设置为200px，内边距设置为10px，边框设置为5px，那么元素的内容区域的宽度将为200px - 2 * 10px - 2 * 5px = 170px。

box-sizing:content-box（浏览器默认）

它指定了盒子的宽度和高度只包括内容区域，不包括内边距、边框和外边距。 content-box 是 CSS 盒子模型的默认值，因此在不指定盒子模型属性时，浏览器会默认使用 content-box 来计算盒子的宽度和高度。
举例来说，如果一个盒子的内容宽度为 200px，内边距为 20px，边框宽度为 2px，外边距为 10px，那么 content-box 的盒子宽度计算如下：
内容宽度：200px
加上内边距：200px + 20px = 220px
加上边框：220px + 2px = 222px
加上外边距：222px + 10px = 232px