CSS3中盒模型的两种不同类型

在CSS3中，有两种不同类型的盒模型：标准盒模型（content-box）和IE盒模型（border-box）。这两种盒模型在计算元素的宽度和高度上有着不同的方式，这篇文章将详细介绍它们的区别，并提供相应的源代码示例。

1. 标准盒模型（content-box）：
   标准盒模型是默认的盒模型，它将元素的宽度和高度定义为内容区域的宽度和高度。具体来说，元素的宽度和高度只包括内容区域，不包括边框（border）、内边距（padding）和外边距（margin）。当你为一个元素设置宽度和高度时，这个宽度和高度只应用于内容区域。

   下面是一个使用标准盒模型的示例代码：

   <style>
     .box {
          
          
       width: 200px;