CSS的两种盒子模型（标准盒模型、怪异盒模型）

1.W3C的标准盒模型

 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin）

边框（border）

内边距（padding）

实际内容（content）四个属性

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面有个案例：

设计了一个长宽为200x200的div并给上边框样式便于观察

打开网页检查原码：

在这张图中，我们发现我们设置的200x200出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框） 

1. margin(外边距) - 清除边框外的区域，外边距是透明的。

2. border(边框) - 围绕在内边距和内容外的边框。

3. padding(内边距) - 清除内容周围的区域，内边距是透明的。

4. content(内容) - 盒子的内容，显示文本和图像。

除此之外还有另外一种盒子模型（IE盒模型 （怪异盒模型））

2.IE盒模型 （怪异盒模型）

此外可以切换两种模型

3.box-sizing的使用

如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性

1.   box-sizing: content-box /**是W3C盒子模型 */

2.   box-sizing: border-box /*是IE盒子模型*/