主题:网页布局中负边距的使用
 楼主 anndana 发表于2010-9-18 9:57:25
网页布局中负边距的使用

CSS边距(Margin),又称CSS空白边,是DIV+CSS的盒模型构架网站前端页 面中的一个重要属性。在本文中,代码吾爱在原文的基础上重新整理,向大家更清晰的说明:负边距/负空白边(Negative Margin)在网页制作的巧妙使用。

负边距(Negative Margin)?从字面意思是可能很容易理解,那就是将某个元素的Marigin属性值设置成负值。

一个负边距应用的完整实例如下:

CSS代码

<style>

/* 说明:负边距(negative margin)的相关问题整理 */

.one {     

height:100px;     

width:300px;     

border:2px solid red;     

margin-bottom:-10px;

}

.two {     

height:100px;     

width:300px;     

border:2px solid blue;

}

</style>

HTML代码

<p></p>

<p></p>

从CSS代码中我们可以发现:我们将一个段落标签<P>所对应的CSS, 即.one的底部边距/空白边设置成了负10px。

1、如何改变覆盖顺序

在本例中,就是如何让红色框覆盖蓝色框,很简单,在需要覆盖到上面的元素样式中添加 : position:relative;   在本例中,就是要在红色的样式 .one 中添加。也就是:

<style>

/* 说明:改变重叠顺序 */

.one {     

height:100px;     

width:300px;     

border:2px solid red;     

margin-bottom:-10px;

position:relative;

}

.two {     

height:100px;     

width:300px;     

border:2px solid blue;

}

</style>

将第一步中的CSS修改为以上代码后,会出现下面的效果:

2、负边距可以用在哪些地方:负边距的用途

可用于导航高亮效果的实现:

CSS代码

<style>

/* 说明:负边距(negative margin)制作导航栏高亮 */

.nav, .nav li {     

list-style:none;

}

.nav li {     

border:2px solid #000;     

float:left;      

margin-left:10px;     

background:#333;     

padding:3px 20px;     

margin-bottom:-2px; /* 遮盖下面内容的边框部分 */     

position:relative; /* IE 下要添加此行 */ }

.nav a {     

color:#fff;      

text-decoration:none;

}

.nav li.current {     

border-bottom:2px solid #eee; /* 当前的把下边框的颜色换成和下边内容相同的 */     

background:#eee; /* 背景的颜色也换成相同的 */

}

.nav li.current a {

color:#000;

}

.content {     

border:2px solid #000;     

background:#eee;     

height:100px;     

width:300px;     

clear:both;

}

</style>

HTML代码

<ul>     

         <li><a href="">当前</a></li>     

         <li><a href="">导航</a></li>    

         <li><a href="">导航</a></li>

</ul>

<div> </div>

以上HTML和CSS综合起来可得以下表现:

注意:firefox 下面 .nav li 不用加 “position:relative; ”这一属性/值也能覆盖到下面的 div ,但是 ie 下面请务必加上。

可用于修正IE的BUG

相信大家都很了解 IE 的 3 像素 bug,当浮动元素和非浮动元素相邻时,会增加额外的 3 像素,这个时候,我们就可以用负边距来解决(并非唯一的办法):

<style>

/* 说明:负边距(negative margin)的相关问题整理 */

#floatContent {   

float: left;   

width: 300px;

}

#otherContent {   

margin-left: 300px;

}

/* 对 MacIE 隐藏 \*/

* html #floatContent {   

margin-right: -3px;

}

* html #otherContent {   

height: 1%; /* 如果你没有设置 #otherContent 的高度或者宽度 */   

margin-left: 0;

}

/* 隐藏结束 */

</style>

这里只是列举了部分和负边距相关的问题,欢迎各位修正、完善。

 

 1 yn1982 发表于2010-9-18 18:51:29

好贴!

 2 devillm 发表于2010-9-26 9:57:03

不错,感谢楼主。

奇新云平台
切换