一、什么是盒模型？

盒模型是CSS布局的基础，用来控制网页元素显示位置以及元素间的位置关系。CSS可以定义所有元素都可以有像盒子一样的外形和平面空间。顾名思义CSS盒模型本质上像盒子一样，用来封装周围的HTML元素。

盒模型的组成：是由content（内容区）、padding（填充区）、border（边框区）、margin（外边距区）这四个部分组成！

二、盒子的大小

盒模型分两种，一种标准盒模型，一种IE怪异盒模型，我将分开解释两种盒模型的不同！

1、标准盒模型的大小

我们通过实验来探究标准盒模型的大小，上代码！

 <div class="box"></div>

.box{
	width: 300px;
	height: 300px;
	background-color: green;
	}

运行代码就会在页面左上角出现设置好宽高的绿色方块

对应的盒模型：

可以看到这个时候方块的大小就是content（内容区）的大小

接下来我们给这个方块加上padding（填充区）：

.box{
	width: 300px;
	height: 300px;
	padding: 10px;
	background-color: green;
	}

这个时候通过控制台我们可以看到这个元素变大了一点

对应的盒模型：

可以看到盒子从300x300变成了320x320了，得出padding是会影响盒子大小的，这时盒子大小就等于content+padding的和

接着我们又给盒子加上border（边框）：

.box{
	width: 300px;
	height: 300px;
	padding: 10px;
	border:10px solid black;
	background-color: green;
			}

这个时候的盒子我们通过控制台看就变成这个大小了：

对应的盒模型：

可以看到宽和高变成了340x340，这个时候盒子的大小就等于content（内容区）+padding（填充区）+border（边框区）它们三个的和

接着给盒子加margin（外边距）,为了方便我们观察给盒子加margin的变化，我们在下面加个类名为box2的div和样式。

.box2{
	width: 50px;
	height: 50px;
	background-color: red;
	}

效果图：

因为div是块级元素，默认是会独占一行，所以新加的红色div会在绿色div的下面。

接着给绿色的div加上margin我们观察下变化

.box{
	width: 300px;
	height: 300px;
	padding: 10px;
	border:10px solid black;
	margin: 10px;
	background-color: green;
	}

可以看到绿色盒子和红色盒子产生了10px的空白

对应的盒模型

绿色方块的宽高：

可以看到盒子大小并没有因为添加margin变大，还是保持在了340x340。

由上诉实验可以得出标准盒模型大小的两点：

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;
	}

对应的盒模型：

可以看到怪异盒模型的大小不会因为border和padding以及margin被撑大，还是原有大小，只不过centent（内容区）变小了

怪异盒模型的宽度：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;   /*左边框的颜色*/