负边距(negative margin)的相关问题整理

负边距(negative margin)在页面制作过程中,有许多妙用,用的好了能让原本复杂的问题变的简单,本文是针对负边距相关问题的整理,欢迎各位补充。

负边距的使用非常简单:

 
<style type="text/css">
/*
说明:负边距(negative margin)的相关问题整理 
整理:CodeBit.cn ( http://www.codebit.cn )
*/
.one {
	height:100px;
	width:300px;
	border:2px solid red;
	margin-bottom:-10px;
}
.two {
	height:100px;
	width:300px;
	border:2px solid blue;
}
</style>
 
<p class="one"></p>
<p class="two"></p>

这时,我们会看到蓝色的框伸到了红色框的里面,下面总结一些问题:

如何改变覆盖顺序

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

负边距可以用在哪些地方:

导航高亮效果的实现:

 
<style type="text/css">
/*
说明:负边距(negative margin)的相关问题整理 
整理:CodeBit.cn ( http://www.codebit.cn )
*/
.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>
 
<ul class="nav">
	<li class="current"><a href="">当前</a></li>
	<li><a href="">导航</a></li>
	<li><a href="">导航</a></li>
</ul>
<div class="content">
</div>

结果:

注意:firefox 下面 .nav li 不用加 position:relative; 也能覆盖到下面的 div ,但是 ie 下面要加上。

修正 IE 的 bug

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

 
<style type="text/css">
/*
说明:负边距(negative margin)的相关问题整理 
整理:CodeBit.cn ( http://www.codebit.cn )
*/
#floatContent {
	float: left;
	width: 300px;
}
#otherContent {
	margin-left: 300px;
}
/* 对 MacIE 隐藏 */
* html #floatContent {
	margin-right: -3px;
}
* html #otherContent {
	height: 1%; /* 如果你没有设置 #otherContent 的高度或者宽度 */
	margin-left: 0;
}
/* 隐藏结束 */
</style>

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

《负边距(negative margin)的相关问题整理》有3个想法

  1. 第二个不错,学习了。
    不过 li.current 元素的底边框颜色改变后,它的左右边框底部呈尖角状,有点瑕疵。
    我试验后,觉得可以把它设定为 border-bottom:none; 然后给它多加2像素的 padding-bottom:2px;

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>