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

 
Js/Css/jQuery

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


负边距的使用非常简单：

CSS: 

  1.  
  2. <style type="text/css"> 
  3. /* 
  4. 说明：负边距(negative margin)的相关问题整理  
  5. 整理：CodeBit.cn （ http://www.codebit.cn ） 
  6. */ 
  7. .one { 
  8.     height:100px; 
  9.     width:300px; 
  10.     border:2px solid red; 
  11.     margin-bottom:-10px; 
  12. } 
  13. .two { 
  14.     height:100px; 
  15.     width:300px; 
  16.     border:2px solid blue; 
  17. } 
  18. </style> 
  19.  


HTML: 
  1.  
  2. <p class="one"></p> 
  3. <p class="two"></p> 
  4.  





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

如何改变覆盖顺序


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



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


导航高亮效果的实现：

CSS: 
  1.  
  2. <style type="text/css"> 
  3. /* 
  4. 说明：负边距(negative margin)的相关问题整理  
  5. 整理：CodeBit.cn （ http://www.codebit.cn ） 
  6. */ 
  7. .nav, .nav li { 
  8.     list-style:none; 
  9. } 
  10. .nav li { 
  11.     border:2px solid #000; 
  12.     float:left; 
  13.     margin-left:10px; 
  14.     background:#333; 
  15.     padding:3px 20px; 
  16.     margin-bottom:-2px; /* 遮盖下面内容的边框部分 */ 
  17.     position:relative; /* IE 下要添加此行 */ 
  18. } 
  19. .nav a { 
  20.     color:#fff;  
  21.     text-decoration:none; 
  22. } 
  23. .nav li.current { 
  24.     border-bottom:2px solid #eee; /* 当前的把下边框的颜色换成和下边内容相同的 */ 
  25.     background:#eee; /* 背景的颜色也换成相同的 */ 
  26. } 
  27. .nav li.current a {color:#000;} 
  28. .content { 
  29.     border:2px solid #000; 
  30.     background:#eee; 
  31.     height:100px; 
  32.     width:300px; 
  33.     clear:both; 
  34. } 
  35. </style> 
  36.  


HTML: 
  1.  
  2. <ul class="nav"> 
  3.     <li class="current"><a href="">当前</a></li> 
  4.     <li><a href="">导航</a></li> 
  5.     <li><a href="">导航</a></li> 
  6. </ul> 
  7. <div class="content"> 
  8. </div> 
  9.  


结果：



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

修正 IE 的 bug

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

CSS: 
  1.  
  2. <style type="text/css"> 
  3. /* 
  4. 说明：负边距(negative margin)的相关问题整理  
  5. 整理：CodeBit.cn （ http://www.codebit.cn ） 
  6. */ 
  7. #floatContent { 
  8.     float: left; 
  9.     width: 300px; 
  10. } 
  11. #otherContent { 
  12.     margin-left: 300px; 
  13. } 
  14. /* 对 MacIE 隐藏 \*/ 
  15. * html #floatContent { 
  16.     margin-right: -3px; 
  17. } 
  18. * html #otherContent { 
  19.     height: 1%; /* 如果你没有设置 #otherContent 的高度或者宽度 */ 
  20.     margin-left: 0; 
  21. } 
  22. /* 隐藏结束 */ 
  23. </style> 
  24.  



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

负边距应用的原理（单行三列布局）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单行三列布局</title>
<style type="text/css">

body {
       margin:0;
       padding-left:180px;
       padding-right:240px;
       min-width:480px;
        color:#FFFFFF;
        
       }
#center {
       width:240px;
       float:left;
        background:#FFF000;       
       }
#left {
       width:180px;
       float:left;       
       margin-left:-420px;
              background:#000FFF;
        }
#right {
       width:240px;
       float:left;       
       margin-right:-100%;
        background:#555BBB;
       }       

</style>
</head>
<body>
<div id="center">
       第2列
</div>
<div id="left">
       第1列
</div>
<div id="right">
       第3列
</div>
</body>
</html>

有话要说