首页 > 代码库 > CSS-负边距原理

CSS-负边距原理

2024-08-31 22:45:30   218人阅读

一.负边距原理

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

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


联系
我们