时间--2016-06-03
知识点：
margin的负值会让盒子的宽高都相应的变大。
margin的负值会让出相应的位置。例如本文的案例中margin-right:-300px，这个盒子就会让出右边的宽度为300px的一个空间，后面的元素浮动的话就会占据他让出的空间。
本文只是个人理解，如有不妥敬请指正。
案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 100%;
overflow: hidden;
}
.left{
float: left;
width: 100px;
height: 300px;
background: red;
}
#content{
float: left;
width: 100%;
height: 400px;
background: pink;
margin-right: -300px;
}
#content div{
margin-right: 300px;/*让这个盒子和父元素的右边有300像素的距离，其中300=左边的div宽度（100） + 右边div的宽度（200）*/
}
#side{
float: left;
background: peru;
width: 200px;
height: 300px;
}
.wrap2{
width:320px;
border:dashed 1px orange;
}
.wrap2 .inner{
overflow:hidden;
margin-left:-10px;
}
.wrap2 .item{
float:left;
width:100px;
height:100px;
margin:10px 0px 10px 10px;
background:blue;
}
</style>
</head>
<body>
<div id="box">
<div class="left"></div>
<div id="content">
<div>
如果将元素的box-sizing属性设置为"border-box"，则width和height表示的是内容、内边距和边框组成区域的高度和宽度。所以增加外边距对内容区域的尺寸没有影响，而增加内边距和边框会导致内容区域的尺寸减小。
现在开始讨论第一个问题：外边距叠加
外边距叠加是指当两个或更多垂直外边距相遇时，外边距的高度等于这几个外边距的高度中的较大者。这就是外边距叠加的情况，并且外边距叠加只发生在垂直外边距上。
</div>
</div>
<div id="side"></div>
</div>
<div class="wrap2">
<div class="inner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
