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

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

负边距的使用非常简单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
< p class = "one" > p >
< p class = "two" > p >

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

如何改变覆盖顺序

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

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

导航高亮效果的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
1
2
3
4
5
6
7
< 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 像素,这个时候,我们就可以用负边距来解决(并非唯一的办法):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

你可能感兴趣的:(css)