标准盒模型与怪异盒模型

在CSS3中，盒模型是用于定义和布局元素的基本概念之一。它描述了在文档中的每个元素周围存在的矩形区域，该区域由四个部分组成：内容区域、内边距、边框和外边距。盒模型的详细介绍如下：

1. 内容区域（Content Area）： 内容区域是元素显示内容的实际区域，它包含了文本、图像或其他媒体。内容区域的大小由元素的宽度（width）和高度（height）属性确定。默认情况下，宽度和高度指定的是内容区域的大小。

2. 内边距（Padding）： 内边距是指位于内容区域和边框之间的空白区域。它用于控制内容与边框之间的距离。可以使用padding属性来设置内边距的大小，属性值可以是具体的像素值，也可以是相对值（例如百分比）。内边距可以在四个方向上分别设置，或者通过使用缩写形式设置所有方向的内边距。

3. 边框（Border）： 边框是包围内容和内边距的线条或样式。边框可以具有不同的样式、宽度和颜色。可以使用border属性来设置边框的样式、宽度和颜色，或者使用border-width、border-style和border-color属性来分别设置这些属性。同样，边框也可以在四个方向上分别设置，或者使用缩写形式设置所有方向的边框。

4. 外边距（Margin）： 外边距是指位于元素边框和相邻元素之间的空白区域。它用于控制元素与其他元素之间的距离。可以使用margin属性来设置外边距的大小，属性值可以是具体的像素值，也可以是相对值。外边距也可以在四个方向上分别设置，或者使用缩写形式设置所有方向的外边距。

5. 在具体的页面调试中，我们可以看到每个标签元素的盒模型，如下图：

    

在CSS3中，还引入了一些新的特性来增强盒模型的功能：

1. 盒模型计算方式： 在标准的CSS盒模型中，元素的宽度和高度属性仅包括内容区域的大小。但在CSS3中，可以通过设置box-sizing属性为"border-box"来改变盒模型的计算方式。当使用border-box时，元素的宽度和高度属性将包括内容区域、内边距和边框的大小。也就是我们常说的怪异盒模型。在日常的页面布局中，我们需要根据页面需要，灵活的选择盒模型或怪异盒模型布局。