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

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

用相对定位和负向移动实现阴影效果

很多朋友喜欢给自己的页面元素加上阴影效果,通常的做法是用图片,图片有效果逼真等优点,但是,同时也加大了服务器的负担,延长了页面加载时间,本文介绍的是用 CSS 相对定位和负向移动实现的阴影效果,代码简洁,效果还不错。

用相对定位和负向移动实现阴影效果 – 示例

 
<style type="text/css">
 
/* 为 DIV 加阴影 */
.out {
	position:relative;
	background:#bbb; 
	margin:10px auto;
	width:240px;
}
.in {
	background:#fff; 
	border:1px solid #555;
	padding:10px 5px;
	position:relative; 
	top:-5px;
	left:-5px;
}
 
/* 为 图片 加阴影 */
.imgShadow {
	position:relative;
	background:#bbb; 
	margin:10px auto;
	width:220px;
}
.imgContainer {
	position:relative; 
	top:-5px;
	left:-5px;
	background:#fff; 
	border:1px solid #555;
	padding:0;
}
.imgContainer img {
	display:block;
}
 
</style>
 
<h4>为 DIV 加阴影:</h4>
<div class="out">
	<div class="in" >
		<img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />
	</div>
</div>
 
<h4>为 图片 加阴影:</h4>
<div class="imgShadow">
	<div class="imgContainer" >
		<img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />
	</div>
</div>