时间--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>
时间： 2024-11-05 21:49:28