两种盒模型

在CSS中，有两种主要的盒模型（Box Model），它们决定了元素的尺寸计算方式：

1. 标准盒模型（W3C Box Model）
   在标准盒模型中，元素的总宽度和总高度分别由以下几个部分组成：

• • Content（内容区）：这是元素的实际内容，比如文字、图片等，由 width 和 height 属性设置的尺寸仅影响内容区的大小。
  • Padding（内边距）：围绕内容区的空白空间，可通过 padding 属性来设置。
  • Border（边框）：紧邻内边距的边框，可通过 border 属性来设置边框的宽度、样式和颜色。
  • Margin（外边距）：元素外部的空白区域，与其他元素分隔开来，由 margin 属性控制。

所以，在标准盒模型中，当您声明一个元素的宽度（width）时，这个宽度仅仅指的是内容区域的宽度，整个盒子的总宽度将是：

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

1. 怪异盒模型（IE盒模型 / Quirks Mode Box Model）
   在怪异盒模型（通常在老版IE浏览器中使用，但在某些quirks模式或特定情况下现代浏览器也可能采用此模型）中，元素的宽度（width）和高度（height）属性同时包含了内容区以及内边距，边框的尺寸。
   因此，在怪异盒模型中，如果设置了元素的宽度（width），那么：

总宽度（在这里称为“总布局宽度”）= border-left + padding-left + width + padding-right + border-right

注意这里的“总宽度”其实是指内容加上内边距的宽度，而不是整个盒子占据的空间（外边距依然独立计算）。

为了统一不同浏览器之间的盒模型行为，并确保元素的尺寸计算一致，可以使用CSS3中的 box-sizing 属性来指定盒模型的计算方式：

• box-sizing: content-box; 表示使用标准盒模型（默认大多数现代浏览器的行为）。
• box-sizing: border-box; 表示使用怪异盒模型，此时元素的总宽度（或高度）会包含内边距和边框，仅content的尺寸会影响元素内部内容的大小。