css盒子模型-margin

共有三张图片使他们都居中
下面我们就按步骤设置图片的样式：

1.设置三个div并设置宽高，加上背景图片，使他们全部都左浮动

思路：
1.有的元素会有协议默认的属性，但大多都用不到，所以需要将他的默认属性去掉，着视我们使用通用选择器将所有的元素边距都设置为0，当我们需要边距时可以再对它设置需要的边距大小。
2.对div设置宽高限定图片显示的大小，再设置左浮动让图片并排排放。

<style type="text/css">
	*{
		margin:0;/* 将所有的元素编剧都设置位0 */
	}
	.item{width: 300px;height: 150px;
		float: left;
	}
</style>
<!-- 给每个div都设置背景图片 -->
<div class="item" style="background: url(../img/b1.jpg);"></div>
<div class="item"  style="background: url(../img/b2.jpg);"></div>
<div class="item"  style="background: url(../img/b3.jpg);"></div>

2.上边我们已将将图片都放置在一排，接下来我们就需要使每个图片之间都有一定的间隔并使他们处于页面中间。

元素与元素之间的距离是通过边距来确定的，这时就用到了和模型中的margin外边距属性。给每个div都加上外边距20个像素，图片两两中间则会出现重叠，因此两图片间的具体则为40px

<style>
.item{width: 300px;height: 200px;
				float: left;
				margin: 20px;
	}
</style>

3.此时三个图片的边距已经设置好了，此时我们需要将图片都进行居中

给三个div加上父元素box并设置大小，因为当子元素进行浮动时就没有办法撑开父元素的大小。此时子元素的高度为0，给父元素设置overflow:auto;则自动撑开。然后设置父元素的宽度，将图片宽度已经增加的左右边距进行计算大小为1020px，则令父元素大小为1020px
此时我们父元素的边距自动设置margin：auto；左右边距相等，因此父元素会居中（只在水平方向有效）

<style>
	#box{
		width: 1020px;
		overflow: auto;
		margin：auto；
	}
</style>
<div id="box">
	<!-- 给每个div都设置背景图片 -->
	<div class="item" style="background: url(../img/b1.jpg);"></div>
	<div class="item"  style="background: url(../img/b2.jpg);"></div>
	<div class="item"  style="background: url(../img/b3.jpg);"></div>
</div>