1.什么是css盒子模型
1.1盒子模型介绍
转自菜鸟教程
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（外边距），边框，填充（内边距），和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
CSS box-model
1.2代码释例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-color: pink;
width: 300px;
border: 25px solid red;
<!--只有一个参数，四边都是25px-->
padding: 25px;
<!--有两个参数，上下是25px，左右是50px-->
padding: 25px 50px;
<!--有三个参数，上是25px，左右是50px，下是100px-->
padding: 25px 50px 100px;
<!--有四个参数，顺序依次是上右下左-->
padding: 25px 50px 100px 200px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子的内容。</div>
</body>
</html>
2.css盒子模型的类型
转自链接
盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
2.1 W3C盒子模型(标准盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
2.2 IE盒子模型(怪异盒模型)
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
2.3 两种模式下如何解决样式的兼容性问题
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
2.4 设置盒子模型（CSS3指定盒子模型种类）
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;
