首页 > Web开发 > 详细

CSS-负边距原理

时间:2017-01-13 21:56:18      阅读:260      评论:0      收藏:0      [点我收藏+]

一.负边距原理

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

    负边距即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>

技术分享

给content加入margin-bottom:-1%;nav向上移动1%。

技术分享

 

CSS-负边距原理

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!