有过前端编程经验的人大多都听说过盒子模型。盒子模型是CSS编程的一种思维模式，它将标签看作一个盒子，来完成一些对盒子的操作，以此达到操作标签的目的。
说到盒子模型就不得不说盒子模型的组成部分了。
而盒子模型又分为标准盒模型和怪异盒模型。
标准盒模型
标准的盒子模型是由margin、border、padding和content组成的。
margin：外边距
margin处于整个盒子模型的最外边，他是外间距（盒子和盒子的距离），它可以拉开盒子与盒子外其他东西的距离。
margin可以为多个方向添加也可以为单个方向添加，就像盒子你可以想一个方向移动或者多个方向移动。
margin-left:10px; /*为盒子左侧添加外边距10px*/
margin-right:10px; /*为盒子右侧添加外边距10px*/
margin-top:10px; /*为盒子顶部添加外边距10px*/
margin-bottom:10px; /*为盒子底部添加外边距10px*/
当然，也可以使用简写的方法为盒子添加margin
margin:10px; /*添加外边距上下左右10px*/
margin:10px 20px; /*添加外边距上下10px,左右20px*/
margin:10px 20px 30px; /*添加外边距上10px,左右20px,下30px*/
margin:10px 20px 30px 40px; /*添加外边距上10px,右20px,下30px,左40px*/
margin的取值支持auto写法，也可以是具体的数值，甚至是负值（盒子的距离不光可以拉开，还可以拉近）
但是margin的auto取值在垂直方向上是无效的，因为auto会自动填满可填满的空间。如果给margin-left取值auto，元素的左外边距会填满父元素内除了它本身的间距，所以元素会居于父元素的最右边。同理，margin-right也会如此。但是如果左右外边距同时取值auto，左右外边距会平分剩余的空间，实现水平居中的效果。但是块元素无法扩充高度上的间距，所以无法使用auto实现垂直方向上的居中。
.box{
width:200px;
height:200px;
background-color:red;
margin:auto;
}
虽然auto对于垂直无效，但是我们常用margin:0 auto;解决水平居中的问题.
当然margin虽然好用，但是有的时候也会伴随着一些问题，使用的时候可要注意。比如margin-top的传递问题和margin的上下重叠问题。
margin-top的传递问题是：
当元素不浮动没有定位时，子元素的margin-top会传递给父元素
.box1{
width: 400px;
height: 400px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin-top: 100px;
}
常见解决方法：
1.改为padding-top:margin-top会传递那就换一个，不过padding-top需要添加给父元素，并且如果父元素高度固定还需要减去padding-top的数值。
2.为父元素添加overflow:hidden;（一般会使用第二种，因为其他方法会改变布局，但是依据情况而定）
3.为父元素或子元素添加浮动:不浮动没定位时会传递，那就让它浮动float:left/right;
4.为父元素或子元素添加绝对定位:不浮动没定位时会传递，那就给它定位position:absolute;
5.给父元素添加上边框
margin的上下重叠问题是：
当两个同级元素上边的有下边距，下面的有上边距时，两个外间距会重叠，高度为两个间距的最大值
.box{
width: 400px;
height: 400px;
background-color: red;
margin-bottom: 50px;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin-top: 100px;
}
常见解决方法:
1.为一个元素添加父元素，并声明父元素overflow:hidden；
2.为子元素添加浮动float:left/right;
3.为子元素添加绝对定位或固定定位position:absolute/fixed;
4.将子元素转为内联块display:inline-block;
border：边框
border处于盒子模型margin的里面，它是边框，相当于日常盒子的盒子本身。
如同margin一样，border可以为单一方向添加也可以为多个方向（4个方向）
border-left:1px #ffffff solid; /*为盒子左边添加border*/
border-right:1px #ffffff solid; /*为盒子右边添加border*/
border-top:1px #ffffff solid; /*为盒子上边添加border*/
border-bottom:1px #ffffff solid; /*为盒子下边添加border*/
border: 1px #ffffff solid; /*为盒子4条边同时添加边框*/
当然border的添加不向margin那样一个数值解决问题，border的添加必须有添加border的样式、添加border的宽度和添加border的颜色，中间用空格隔开，顺序没有讲究。
border: 1px #ffffff solid;
border的宽度取值为数值，需要带上单位px(像素)；
border的颜色取值可以是RGB表示法RGB(255,255,255)、16位表示法#FFFFFF和颜色的英文单词black；
border的样式的取值可以是dashed(虚线)、solid(实线)、double(双线)和dotted(点线)；
无论缺少哪一样，border都不会生效/
padding：内边距
padding在盒子模型中在处于border的里面，它是内边距（盒子和盒子里东西的距离），常用来拉开盒子和盒子里其他东西的距离。
padding的用法和margin相似，可以同时向一个方向添加padding，也可以同时向多个方向添加padding，当然如同Margin一样可以简写
margin-left:10px; /*为盒子左侧添加内边距10px*/
margin-right:10px; /*为盒子右侧添加内边距10px*/
margin-top:10px; /*为盒子顶部添加内边距10px*/
margin-bottom:10px; /*为盒子底部添加内边距10px*/
margin:10px; /*添加内边距上下左右10px*/
margin:10px 20px; /*添加内边距上下10px,左右20px*/
margin:10px 20px 30px; /*添加内边距上10px,左右20px,下30px*/
margin:10px 20px 30px 40px; /*添加内边距上10px,右20px,下30px,左40px*/
padding的取值不支持auto写法，只能是数值，也不能取负值。
padding撑大盒子问题
如果盒子设置了宽高，padding添加上后会将盒子撑大，如果没有设置快高不会撑大盒子。
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
}
解决方法：
1.用现有的宽高减去padding的值可以使其回复至初始大小
2.将标准盒模型转换成怪异盒模型
content：内容
content处于盒子模型的最里面，是盒子模型的内容，一般用来装盒子里的东西。
怪异盒模型
此外除了标准盒子模型还有一个怪异盒子模型。这个怪异盒子模型究竟怪异在什么地方？
怪异盒子模型和标准盒子模型不一样在它只有margin和content。
不过它的content相当于标准盒子模型的border、padding和content部分。
所以使用padding增大盒子和盒子里内容的间距不需要做减法，将其转换成怪异盒子模型也能解决，因为标准盒子的padding和content都是属于怪异盒子content，所以不会撑大盒子。
那么，将标准盒子转换成怪异盒子的方法有哪些？
1.doctype不写
doctype的作用是声明文档类型，浏览器将其读取解析确定这是一个html文件，如果不写的话，低版本IE浏览器(IE8及以下)会将标准盒子模型转换成怪异盒模型。
这种方法不推荐使用。
2.声明box-sizing:border-box;
这种方法可以将标准盒模型转换为怪异盒模型，常用且推荐使用的方法。
