CSS-负边距原理

最新推荐文章于 2018-10-27 01:51:04 发布

z-pan

最新推荐文章于 2018-10-27 01:51:04 发布

阅读量129

点赞数

原文链接：http://www.cnblogs.com/yezi-bupt/p/6284048.html

版权

一.负边距原理

正边距以相邻模块的位置为参考点进行移动，并对周围模块进行合理地排挤。

负边距即margin的四个边界值为负值。

在html中使用负边距margin-left和margin-top相当于是元素左移、上移，同时文档流的位置会发生变化。

使用负边距margin-right和margin-bottom，元素本身没有变化，其后面的元素会相应的左移，上移。

归纳为文档流通过负边距自身只能上移或右移。

二.说明

1margin-left,margin-top

 1 <style type="text/css">
 2 .wrap div{float:left;height:200px;}
 3 .wrap {overflow:hidden;_zoom:1;}
 4 .content{width:10%;background:gray;}
 5 .nav{width:5%;background:orange;;}
 6 .infor{width:5%;background:green;}
 7 </style>
 8 <body>
 9 <div class="wrap">
10 <div class="content">a</div>
11 <div class="nav">b</div>
12 <div class="infor">c</div>
13 </div>
14 </body>

给nav加入margin-left:-3%;nav向前移动3%。

2.margin-right,margin-bottom

<style type="text/css">
.wrap div{float:left;height:20px;}
.wrap {overflow:hidden;_zoom:1;}
.content{width:10%;background:gray; }
.nav{clear:both;width:5%;background:orange;}
.infor{clear:both;width:5%;background:green;}
</style>
<body>
<div class="wrap">
<div class="content">a</div>
<div class="nav">b</div>
<div class="infor">c</div>
</div>
</body>