负边距布局

Posted 迷失地

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了负边距布局相关的知识,希望对你有一定的参考价值。

时间--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>

以上是关于负边距布局的主要内容,如果未能解决你的问题,请参考以下文章

如何在约束布局上实现重叠/负边距?

边距的小知识点;

负边距三栏布局(圣杯布局双飞翼布局)

CSS布局奇淫巧计之-强大的负边距

负边距布局

margin 负边距 的知识点