负边距(negative margin)在页面制作过程中,有许多妙用,用的好了能让原本复杂的问题变的简单,本文是针对负边距相关问题的整理,欢迎各位补充。
负边距的使用非常简单:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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> |
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
|
<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> |
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
|
<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布局技术中,负边距(negative margin)虽然较少被公开讨论,但它却在网页设计中扮演着重要的角色。就像一个网络上的禁忌话题,虽然大家都在使用,但很少有人愿意深入探讨。 负边距在CSS中是一种强大的...
CSS中的负边距(negative margin)是一种强大的布局工具,尤其在处理复杂或自适应的网页设计时显得尤为重要。它允许开发者调整元素的位置,甚至在某些情况下改变元素的尺寸。以下是对负边距更详细的解释和应用场景:...
为了解决这个问题,可以采用一种称为“负边距(negative margin)”的技术。具体来说,就是给父容器设置与子元素相对应的负边距值,以抵消子元素的正边距,从而使得元素能够紧贴父容器的边缘,实现两端对齐。 在这...
4. **使用负的外边距(negative margin)**:虽然不推荐,但在某些情况下,可以通过使用负的`margin`值来抵消`width:100%`带来的额外宽度。例如,`margin: 0 -10px;`可以将左右`margin`设为负数,但这可能会引入其他...
CSS的浮动(float)和负边距(negative margin)技术常用于实现这种布局,尽管现代布局方法如Flexbox和Grid已经提供了更简洁的解决方案。 以上六个示例涵盖了CSS的多个核心概念,包括选择器、盒模型、布局、定位、...
Bootstrap 的栅格系统采用了一种称为负边距(negative margins)的技术来实现列(columns)之间的间隔。默认情况下,`.row` 类设置了一个左右方向的负 margin值,例如 `margin-left:-15px;margin-right:-15px;`,...
Padding与Margin一样,可接受长度、百分比值,且可单独设置每个边的内边距。 通过熟练掌握Position、Float、Margin和Padding,开发者可以创建出各种复杂而美观的网页布局,适应不同设备和屏幕尺寸。理解并合理应用...
要实现三列DIV等高布局,可以采用一种称为“负边距+内补丁”(Negative Margin + Padding)的方法。这种方法利用CSS的`overflow`、`margin`和`padding`属性,通过创建额外的空间并隐藏超出的部分来达到等高的效果。 ...
2. **负边距布局(Negative Margin Layout)** 负边距布局利用了CSS的负值margin来调整元素位置,通常适用于固定宽度的三栏布局。通过给左右两栏设置负的外边距,使其“挤”向中心内容栏,实现三栏并列。这种方法在...
7. **负边距(Negative Margin)** - IE6在某些情况下不正确处理负边距,可以针对性地调整。 ### 不常用CSS Hack技术 1. **CSS表达式(CSS Expressions)** - `expression`是IE特有的,允许在CSS属性中使用...
其中一种常用的方法是利用负边距(negative margin),将其中一个或两个div的外边距设置为负值,以便拉近它们的距离。然而,这种方法的局限性在于,如果这些div嵌套在一个已经浮动的父div中,负边距方法可能失效,...
为了更好地控制外边距合并,开发者有时会使用内边距(padding)、边框(border)或者负外边距(negative margin)来调整元素间的间距。例如,为了避免段落间的外边距合并,可以在每个段落前添加一个透明边框,或者在...
5. **负边距(Negative Margins)**:用于调整元素的位置,可以创建出视觉上的间距效果。 6. **字体和颜色样式**:通过`font-size`、`color`和`background-color`等属性控制文本和背景的颜色及大小。 7. **浏览器...
3. **设置负边距(Negative Margin)** 可以通过设置行内元素的负左边距(`margin-left`)来抵消空白,但这需要根据实际的空白大小进行计算,不够通用,如: ```css ul.inline-block-list li { margin-left: -4...
3. **负边距(Negative Margins)**: 通过设置元素的上边距为负值,同时设置与之相反的下边距,可以使元素相对于其容器的中心位置对齐。这种方法需要精确计算,且对元素大小变化不友好。 4. **CSS Hack**: 对于...
其关键在于利用CSS的定位(positioning)属性以及负边距(negative margin)技巧。以下是实现这一布局的HTML结构和CSS样式: HTML代码: ```html <div id="content"></div> <div id="side"></div> ...