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

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

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

主要区别如下：

传统（标准）盒子模型：

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

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

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

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

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

.element {
  box-sizing: border-box;
}
请注意，新盒子模型可能会影响到某些布局和样式计算，因此在使用新盒子模型时请确保了解其影响，并根据实际需求进行选择。