-
楼主
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>
这里只是列举了部分和负边距相关的问题，欢迎各位修正、完善。
