一、什么是盒模型？
盒模型是CSS布局的基础，用来控制网页元素显示位置以及元素间的位置关系。CSS可以定义所有元素都可以有像盒子一样的外形和平面空间。顾名思义CSS盒模型本质上像盒子一样，用来封装周围的HTML元素。
盒模型的组成：是由content（内容区）、padding（填充区）、border（边框区）、margin（外边距区）这四个部分组成！
二、盒子的大小
盒模型分两种，一种标准盒模型，一种IE怪异盒模型，我将分开解释两种盒模型的不同！
1、标准盒模型的大小
我们通过实验来探究标准盒模型的大小，上代码！
<div class="box"></div>
.box{
width: 300px;
height: 300px;
background-color: green;
}
运行代码就会在页面左上角出现设置好宽高的绿色方块
接下来我们给这个方块加上padding（填充区）：
.box{
width: 300px;
height: 300px;
padding: 10px;
background-color: green;
}
这个时候通过控制台我们可以看到这个元素变大了一点
接着我们又给盒子加上border（边框）：
.box{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid black;
background-color: green;
}
这个时候的盒子我们通过控制台看就变成这个大小了：
接着给盒子加margin（外边距）,为了方便我们观察给盒子加margin的变化，我们在下面加个类名为box2的div和样式。
.box2{
width: 50px;
height: 50px;
background-color: red;
}
效果图：
接着给绿色的div加上margin我们观察下变化
.box{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid black;
margin: 10px;
background-color: green;
}
对应的盒模型
由上诉实验可以得出标准盒模型大小的两点：
1）标准盒模型的大小：是由content（内容）+padding（填充区）+borde（边框区）三部分组成！
2）标准盒模型占据的位置大小：是由content（内容）+padding（填充区）+border（边框区）+margin（外边距）四部分组成的！
2、IE怪异盒模型的大小
我们再来看下怪异盒模型的大小，上代码
<input type="submit" class="box" />
.box{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid black;
margin: 10px;
background-color: green;
}
怪异盒模型的宽度：width（content+border+padding）+margin 怪异盒模型的高度：height（content+border+padding）+margin
三、盒模型的属性
padding（内边距）属性
padding是在边框和内容之间的区域，只能是正值，不能是负值。padding在盒子里面，在盒子和内容之间。
1）padding的作用和特点：
1、用来控制父元素和子元素之间的位置关系； 2、用来控制元素和内容之间的位置关系的。 3、加了padding值之后，padding值会把元素原有的大小撑大；如果让元素原本大小不变得话，需要在元素的 宽高上减掉所加的padding； 4、如果元素是被内容撑开的，没有设置宽高，padding会直接撑开元素，这种情况就不用减宽高 5、背景图片的位置，是不受padding的影响的。 6、背景色会延展到padding区域。
2）padding的用法
1、Padding复合式写法设置多个方向填充
padding: 15px; /* 一个属性值表示四周都填充15px */
padding: 15px 12px; /* 第一个属性值表示上下填充15px，第二个表示左右填充12px */
padding: 14px 16px 17px; /* 第一个属性值表示上填充14px，第二个表示左右填充16px，第三个表示下填充17px */
padding: 12px 15px 16px 17px; /* 第一个属性值是上填充12px，第二个是右填充15px，第三个是下填充16px，第四个是左填充17px */
2、padding设置单一方向
padding-top:（设置上填充）、padding-right:（设置右填充）、padding-bottom:（设置下填充）、padding-left:（设置左填充）
margin（外边距）属性
margin是在元素的外围，是透明的没有背景颜色的，不会撑大元素的大小，margin值既可以写正值，也可以写负值。
1）margin的作用和特点：
1、控制同辈元素之间的位置关系。 2、margin是在元素边框以外的空白区。 3、margin不会影响元素的实际宽高，但是会增加元素的所占区域；
2）margin的用法
1、margin复合式写法设置多个方向的外边距
margin: 15px; /* 一个属性值表示四周外边距15px */
margin: 15px 12px; /* 第一个属性值表示上下外边距15px，第二个表示左右外边距12px */
margin: 14px 16px 17px; /* 第一个属性值表示上外边距14px，第二个表示左右外边距16px，第三个表示下外边距17px */
margin: 12px 15px 16px 17px; /* 第一个属性值是上外边距12px，第二个是右外边距15px，第三个是下外边距16px，第四个是左外边距17px */
2、margin设置单一方向的外边距
margin-top:（设置上外边距）、
margin-right:（设置右外边距）、
margin-bottom:(设置下外边距)、
margin-left:（设置左外边距）
3、用margin实现元素水平居中，下列三种写法任意一种可实现元素水平居中
margin:0 auto; /*设置对象上下间距为0，左右自动*/
margin-leftauto:auto;
margin-right:auto;
border（边框）的属性：
1、边框有四个方向： border-top（上边框）、 border-bottom（下边框）、 border-left（左边框）、 border-right（右边框）。可单独设置一边的边框！
2、边框宽度：border-width
3、边框颜色：border-color:
4、边框样式：border-style: solid(实线)/dashed(虚线)dotted(点划线)double(双线)
1）border的用法
1、border 的复合式写法
border: 3px solid green; /* 表示四周边框宽度为3px、实线、边框颜色为绿色*/
2、border 设置单边的边框样式
border-top:#f0f solid 10px; /*上边框的样式*/
border-right:#00f dotted 20px; /*右边框的样式）*/
border-bottom:#0ff dashed 15px; /*下边框的样式*/
border-left:#0f0 double 25px;/*左边框的样式*/
3、border-width 的复合式写法
border-width:5px 10px 15px 20px; /*border-width的复合式写法*/
border-top-width:5px; /*上边框的宽度*/
border-right-width:10px; /*右边框的宽度*/
border-bottom-width:15px; /*下边框的宽度*/
border-left-width: 20px; /*左边框的宽度*/
4、border-style 的复合式写法
border-style:solid dashed dotted double；/*border-style的复合式写法*/
border-top-style:solid; /*上边框的线型*/
border-right-style:dashed; /*右边框的线型*/
border-bottom-style:double; /*下边框的线型*/
border-left-style:dotted; /*左边框的线型*/
5、border-color 的复合式写法
border-color:#ff0 #f0f #0ff #0f0；/*border-color的复合式写法*/
border-top-color:#ff0; /*上边框的颜色*/
border-right-color:#f0f; /*右边框的颜色*/
border-bottom-color:#0ff; /*下边框的颜色*/
border-left-color:#0f0; /*左边框的颜色*/
