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

最新推荐文章于 2024-09-29 08:45:00 发布

原创最新推荐文章于 2024-09-29 08:45:00 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了CSS中负边距的使用方法及应用场景，包括解决IE三像素bug、实现导航高亮效果等，并提供了示例代码。

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