`
liuguofeng
  • 浏览: 448780 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

    博客分类:
  • css
 
阅读更多

负边距(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中边框使用负边距值的奇技淫巧

    在众多的CSS布局技术中,负边距(negative margin)虽然较少被公开讨论,但它却在网页设计中扮演着重要的角色。就像一个网络上的禁忌话题,虽然大家都在使用,但很少有人愿意深入探讨。 负边距在CSS中是一种强大的...

    常用技巧margin负外边距的使用介绍

    CSS中的负边距(negative margin)是一种强大的布局工具,尤其在处理复杂或自适应的网页设计时显得尤为重要。它允许开发者调整元素的位置,甚至在某些情况下改变元素的尺寸。以下是对负边距更详细的解释和应用场景:...

    详解css使既有浮动又有左右margin的多个元素两端对其

    为了解决这个问题,可以采用一种称为“负边距(negative margin)”的技术。具体来说,就是给父容器设置与子元素相对应的负边距值,以抵消子元素的正边距,从而使得元素能够紧贴父容器的边缘,实现两端对齐。 在这...

    关于table的width:100%和margin导致溢出

    4. **使用负的外边距(negative margin)**:虽然不推荐,但在某些情况下,可以通过使用负的`margin`值来抵消`width:100%`带来的额外宽度。例如,`margin: 0 -10px;`可以将左右`margin`设为负数,但这可能会引入其他...

    《css效果图收集》一些好看的css效果图

    CSS的浮动(float)和负边距(negative margin)技术常用于实现这种布局,尽管现代布局方法如Flexbox和Grid已经提供了更简洁的解决方案。 以上六个示例涵盖了CSS的多个核心概念,包括选择器、盒模型、布局、定位、...

    BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

    Bootstrap 的栅格系统采用了一种称为负边距(negative margins)的技术来实现列(columns)之间的间隔。默认情况下,`.row` 类设置了一个左右方向的负 margin值,例如 `margin-left:-15px;margin-right:-15px;`,...

    css常用的网页布局样式属性.pdf

    Padding与Margin一样,可接受长度、百分比值,且可单独设置每个边的内边距。 通过熟练掌握Position、Float、Margin和Padding,开发者可以创建出各种复杂而美观的网页布局,适应不同设备和屏幕尺寸。理解并合理应用...

    用CSS实现三列DIV等高布局以传达更好的视觉效果

    要实现三列DIV等高布局,可以采用一种称为“负边距+内补丁”(Negative Margin + Padding)的方法。这种方法利用CSS的`overflow`、`margin`和`padding`属性,通过创建额外的空间并隐藏超出的部分来达到等高的效果。 ...

    css-three-columns-layout:css三栏布局的几种实现方式

    2. **负边距布局(Negative Margin Layout)** 负边距布局利用了CSS的负值margin来调整元素位置,通常适用于固定宽度的三栏布局。通过给左右两栏设置负的外边距,使其“挤”向中心内容栏,实现三栏并列。这种方法在...

    css hack总结 图片整理版

    7. **负边距(Negative Margin)** - IE6在某些情况下不正确处理负边距,可以针对性地调整。 ### 不常用CSS Hack技术 1. **CSS表达式(CSS Expressions)** - `expression`是IE特有的,允许在CSS属性中使用...

    IE6 两个div有间隙的问题(IE 3px bug)

    其中一种常用的方法是利用负边距(negative margin),将其中一个或两个div的外边距设置为负值,以便拉近它们的距离。然而,这种方法的局限性在于,如果这些div嵌套在一个已经浮动的父div中,负边距方法可能失效,...

    CSS外边距叠加的问题,CSS教程

    为了更好地控制外边距合并,开发者有时会使用内边距(padding)、边框(border)或者负外边距(negative margin)来调整元素间的间距。例如,为了避免段落间的外边距合并,可以在每个段落前添加一个透明边框,或者在...

    CSS元素的浮动与定位综合案例3.pdf

    5. **负边距(Negative Margins)**:用于调整元素的位置,可以创建出视觉上的间距效果。 6. **字体和颜色样式**:通过`font-size`、`color`和`background-color`等属性控制文本和背景的颜色及大小。 7. **浏览器...

    清除行内元素之间HTML空白的几种解决方案

    3. **设置负边距(Negative Margin)** 可以通过设置行内元素的负左边距(`margin-left`)来抵消空白,但这需要根据实际的空白大小进行计算,不够通用,如: ```css ul.inline-block-list li { margin-left: -4...

    垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF

    3. **负边距(Negative Margins)**: 通过设置元素的上边距为负值,同时设置与之相反的下边距,可以使元素相对于其容器的中心位置对齐。这种方法需要精确计算,且对元素大小变化不友好。 4. **CSS Hack**: 对于...

    CSS教程:完美的绝对底部

    其关键在于利用CSS的定位(positioning)属性以及负边距(negative margin)技巧。以下是实现这一布局的HTML结构和CSS样式: HTML代码: ```html &lt;div id="content"&gt;&lt;/div&gt; &lt;div id="side"&gt;&lt;/div&gt; ...

Global site tag (gtag.js) - Google Analytics