盒子模型和新盒子模型及区别

盒子模型是用于描述 HTML 元素在页面中占据的空间的概念。它将每个元素视为一个矩形框，由内容区域、内边距、边框和外边距组成。这个传统的盒子模型也被称为 "标准盒子模型"。

新盒子模型是指使用 CSS3 中的 box-sizing 属性设置为 border-box 后的一种盒子模型。在新盒子模型下，元素的宽度和高度包括了边框和内边距，而不再只计算内容区域的尺寸。

主要区别如下：

传统（标准）盒子模型：

• 元素的宽度和高度不包括边框和内边距，只计算内容区域的尺寸。
• 宽度 = 内容区域的宽度 + 左右内边距 + 左右边框。
• 高度 = 内容区域的高度 + 上下内边距 + 上下边框。

新盒子模型（box-sizing: border-box）：

• 元素的宽度和高度包括边框和内边距。
• 宽度 = 内容区域的宽度，不包括边框和内边距。
• 高度 = 内容区域的高度，不包括边框和内边距。

使用新盒子模型可以更方便地控制元素的大小和布局，特别是在处理响应式设计和排版时。它使得设置元素的宽度和高度更加直观，因为不需要考虑边框和内边距对尺寸的影响。

要在 CSS 中使用新盒子模型，您可以将 box-sizing 属性设置为 border-box：

.element {
  box-sizing: border-box;
}
 

传统盒子模型和新盒子模型的主要区别在于它们如何计算元素的宽度和高度。

传统盒子模型：

• 宽度（width）和高度（height）属性只包括内容区域的尺寸。
• 内容区域的尺寸加上内边距和边框的尺寸才是实际展示的总宽度和高度。
• 在传统盒子模型中，设置宽度和高度会影响到元素整体的尺寸。

新盒子模型：

• 宽度（width）和高度（height）属性包括了内容区域、内边距和边框的尺寸。
• 实际展示的总宽度和高度等于宽度和高度属性的值。
• 在新盒子模型中，设置宽度和高度只会影响到内容区域的尺寸，而不会改变整体的尺寸。

简而言之，传统盒子模型将宽度和高度属性仅应用于内容区域，而新盒子模型将宽度和高度属性应用于整个盒子（包括内容、内边距和边框）。这样做可以更直观地控制元素的尺寸，并且避免了需要手动计算内边距和边框对最终尺寸的影响。

要注意的是，默认情况下，浏览器使用传统盒子模型来渲染元素。如果想使用新盒子模型，需要通过设置box-sizing: border-box;来改变盒子模型的行为